如何将第二个水平x轴刻度添加到jqplot并自定义轴设置? [英] How to add 2nd horizontal x axis scale to jqplot and customize axis settings?

问题描述

注意:尽管这是一个

Note: Although this is a self-answered question, I am always curious about better approaches.

目标:我想调整此初始图并添加第二个X轴以同时显示度数和弧度.

Goal: I would like to adjust this initial plot and add a 2nd X axis to show both degrees and radians.

如何设置jqPlot PlotOptions以添加x和y标签，更改比例并添加第二个X轴?

我使用的是我写的JavaScript库，称为 html5csv [许可证:GPL]支持各种数据分析操作以及与jqPlot进行绘图的接口.它允许为每个图指定jqPlot plotOptions对象.

I am using a JavaScript library that I wrote called html5csv [License: GPL] that support various data analysis operations and interfaces to jqPlot for plotting. It allows the specification of the jqPlot plotOptions object for each plot.

(当前为空白)plotOptions在代码的第一行.您可能会假定随后的代码从html5csv库调用CSV().jqplot()将plotOptions正确地传递到了jqPlot.

The (currently blank) plotOptions are on the first line of code. You may assume the plotOptions are correctly delivered to jqPlot by the subsequent code invoking CSV().jqplot() from the html5csv library.

plotOptions = {};
CSV.begin('%F', {dim:[36,4],header:['deg','rad','sin','cos'],
                 func: function(i,j){
                     var deg = 10*(i);
                     var rad = deg*2*Math.PI/360.0;
                     if (j===0) return deg;
                     if (j===1) return rad;
                     if (j===2) return Math.sin(rad);
                     if (j===3) return Math.cos(rad);
                 }
                }).
    jqplot([['chart1',[['deg','sin'],['deg','cos']], plotOptions]]).
    table('tab1',{header:1}).
    go();

单轴正弦，余弦波图的jsfiddle

此jqPlot文档显示到2个X轴和9个Y轴，但是在调用new Axis()时，我在控制台中得到了Uncaught ReferenceError: Axis is not defined.为了解决这个问题，我尝试将更多的jqplot .js文件添加到脚本头中，但这没有帮助.

This jqPlot documentation shows up to 2 X axes and 9 Y axes but when calling new Axis() I get Uncaught ReferenceError: Axis is not defined in the console. To fix this I tried adding more of the jqplot .js files to the script headers but it did not help.

jqplot轴格式设置文档显示了所有内容如果可以创建一个轴，则可以配置轴标签，刻度等选项.

jqplot Axis formatting options documentation shows all the options to configure axis labels, ticks, etc. for a particular axis if I could create one.

我如何从这里继续?

推荐答案

不要调用new Axis();这是在jqPlot内部为您完成的.

Don't call new Axis(); This is done for you internally in jqPlot.

基本上，如果您在plotOptions中声明了正确的键，则将为您设置轴.但是，如果密钥丢失或命名错误，显然会失败.

Basically, if you declare the right keys in plotOptions, the Axis will be set up for you. But if the keys are missing or misnamed, it will obviously fail.

以下是完成的示例:

plotOptions = {
  axes: {
    xaxis: {
      show: true,
      label: 'deg',
      min: 0,
      max: 360,
      tickInterval: 45
    },
    yaxis: {
      show: true,
      label: 'y',
      min: -2.0,
      max: 2.0
    }
  }
};

注意:您不需要调用new Axis，但是需要按如下所示命名对象字段.

Note: You don't need to call new Axis, but you do need to name the object fields as shown.

plotOptions = {
  axes: {
    xaxis: {
      show: true,
      label: 'deg',
      min: 0,
      max: 360,
      tickInterval: 45
    },
    yaxis: {
      show: true,
      label: 'y',
      min: -2.0,
      max: 2.0
    }
  }
};
CSV.begin('%F', {
  dim: [36, 4],
  header: ['deg', 'rad', 'sin', 'cos'],
  func: function(i, j) {
    var deg = 10 * (i);
    var rad = deg * 2 * Math.PI / 360.0;
    if (j === 0) return deg;
    if (j === 1) return rad;
    if (j === 2) return Math.sin(rad);
    if (j === 3) return Math.cos(rad);
  }
}).
jqplot([
  ['chart1', [
    ['deg', 'sin'],
    ['deg', 'cos']
  ], plotOptions]
]).
table('tab1', {
  header: 1
}).
go();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.css" />
<script src="https://cdn.rawgit.com/DrPaulBrewer/html5csv/7f39da16/html5csv.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisTickRenderer.js"></script>

plotOptions = {
  axes: {
    xaxis: {
      show: true,
      label: 'deg',
      min: 0,
      max: 360,
      tickInterval: 45
    },
    x2axis: {
      show: true,
      label: 'rad',
      min: 0,
      max: 2 * Math.PI,
      numberTicks: 9
    },
    yaxis: {
      show: true,
      label: 'y',
      min: -2.0,
      max: 2.0
    }
  }
};

plotOptions = {
  axes: {
    xaxis: {
      show: true,
      label: 'deg',
      min: 0,
      max: 360,
      tickInterval: 45
    },
    x2axis: {
      show: true,
      label: 'rad',
      min: 0,
      max: 2 * Math.PI,
      numberTicks: 9
    },
    yaxis: {
      show: true,
      label: 'y',
      min: -2.0,
      max: 2.0
    }
  }
};
CSV.begin('%F', {
  dim: [36, 4],
  header: ['deg', 'rad', 'sin', 'cos'],
  func: function(i, j) {
    var deg = 10 * (i);
    var rad = deg * 2 * Math.PI / 360.0;
    if (j === 0) return deg;
    if (j === 1) return rad;
    if (j === 2) return Math.sin(rad);
    if (j === 3) return Math.cos(rad);
  }
}).
jqplot([
  ['chart1', [
    ['deg', 'sin'],
    ['deg', 'cos']
  ], plotOptions]
]).
table('tab1', {
  header: 1
}).
go();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.css" />
<script src="https://cdn.rawgit.com/DrPaulBrewer/html5csv/7f39da16/html5csv.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisTickRenderer.js"></script>

注意:也无需在此处调用new Axis().正确命名plotOptions键即可使用. 使用第一个X轴使用原始的单个X坐标绘制数据.

Notes: No need to call new Axis() here, either. Name the plotOptions keys properly and it works. Plotting of data used the original single X coordinate using the 1st X axis.

---

来自 jqPlot Axis文档:

轴选项是在绘图选项的顶级的轴对象内指定的，如下所示:

Axes options are specified within an axes object at the top level of the plot options like so:

{
   axes: {
       xaxis: {min: 5},
       yaxis: {min: 2, max: 8, numberTicks:4},
       x2axis: {pad: 1.5},
       y2axis: {ticks:[22, 44, 66, 88]}
       }
}

有2个x轴("xaxis"和"x2axis")和9个轴("yaxis"，"y2axis"). ‘y3axis’，...可以指定其中任何一个或全部.

There are 2 x axes, ‘xaxis’ and ‘x2axis’, and 9 yaxes, ‘yaxis’, ‘y2axis’. ‘y3axis’, ... Any or all of which may be specified.

摘录自文档的有用轴选项

注意:确实存在其他选项.这些是最基本的. 为了清晰起见，在其中的一些文章中我做了一些稍微的编辑.

Useful axis options excerpted from the documentation

Note: Additional options do exist. These are the most basic ones. In a few of these I edited slightly for clarity.

show

true，以在图形上显示轴.

true to display the axis on the graph.

label

轴标签

showLabel

true以显示轴标签.

true to show the axis label.

min

轴的最小值(以数据单位，而不是像素为单位).

minimum value of the axis (in data units, not pixels).

max

轴的最大值(以数据单位，而不是像素为单位).

maximum value of the axis (in data units, not pixels).

autoscale

自动缩放轴的最小值和最大值以提供合理的刻度间距.

true to Autoscale the axis min and max values to provide sensible tick spacing.

如果设置了轴的最小值或最大值，则自动缩放将关闭.尽管tickInterval尚未经过测试，但numberTicks，tickInterval和pad选项可与自动缩放一起使用.自动缩放功能启用后，padMin和padMax不会执行任何操作.

If axis min or max are set, autoscale will be turned off. The numberTicks, tickInterval and pad options do work with autoscale, although tickInterval has not been tested yet. padMin and padMax do nothing when autoscale is on.

ticks

轴的刻度线的1D [val，val，...]或2D [[val，label]，[val，label]，...]数组.如果未指定标签，则将值格式化为适当的标签.

1D [val, val, ...] or 2D [[val, label], [val, label], ...] array of ticks for the axis. If no label is specified, the value is formatted into an appropriate label.

numberTicks

所需的刻度数.默认为自动计算.

Desired number of ticks. Default is to compute automatically.

tickInterval

单位数.与numberTicks互斥.

number of units between ticks. Mutually exclusive with numberTicks.

showTicks

true，表示是否显示刻度(包括标记和标签).如果在刻度线本身上指定，则不会覆盖showMark和showLabel选项.

true to show the ticks (both marks and labels) or not. Will not override showMark and showLabel options if specified on the ticks themselves.

showTickMarks

true，表示是否显示刻度线(越过网格).由tick自身的showTicks和showMark选项覆盖.

true to show the tick marks (line crossing grid) or not. Overridden by showTicks and showMark option of tick itself.

syncTicks

true尝试同步多个轴上的刻度线间距，以使刻度线和网格线对齐.但是，这会对自动缩放算法产生影响.通常，如果不需要同步刻度，则自动缩放单个轴会更好.

true to try and synchronize tick spacing across multiple axes so that ticks and grid lines line up. This has an impact on autoscaling algorithm, however. In general, autoscaling an individual axis will work better if it does not have to sync ticks.

tickSpacing

一个数字，给出图上刻度之间的近似像素间距.在自动缩放时使用.该数字将是一个上限，实际间距将更少.

A number giving approximate pixel spacing between ticks on graph. Used during autoscaling. This number will be an upper bound, actual spacing will be less.

这篇关于如何将第二个水平x轴刻度添加到jqplot并自定义轴设置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！