如何将第二个水平 x 轴比例添加到 jqplot 并自定义轴设置？

Question

注意：虽然这是self-answered question，但我总是对更好的方法感到好奇。

x 的 sin(x) 和 cos(x) 以度为单位。

目标：我想调整这个初始图并添加第二个 X 轴来显示度数和弧度。

如何设置 jqPlot PlotOptions 以添加 x 和 y 标签、更改比例以及添加第二个 X 轴？

我正在使用我编写的名为html5csv [许可证：GPL] 的 JavaScript 库，它支持各种数据分析操作和 jqPlot 的绘图接口。它允许为每个绘图指定 jqPlot plotOptions 对象。

（当前为空白）plotOptions 位于代码的第一行。您可以假设 plotOptions 已通过从 html5csv 库中调用 CSV().jqplot() 的后续代码正确传递到 jqPlot。

html5csv + jqplot 无特殊轴的双折线图

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 of single axes sine, cosine wave plot

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

jqplot Axis formatting options documentation 显示了为特定轴配置轴标签、刻度等的所有选项（如果我可以创建的话）。

我该如何从这里开始？

Answer 1

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

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

以下是完成的示例：

第 1 部分：定制的单轴组

输出

jqplot PlotOptions 输入

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，但您需要为对象字段命名，如图所示。

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>

---

第 2 部分：双 X 轴，带有度数和弧度刻度

输出

jqPlot PlotOptions 输入

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 坐标绘制数据。

---

参考

来自the jqPlot Axis docs：

轴选项在绘图选项顶层的轴对象中指定，如下所示：

{
   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个yaxes，‘yaxis’，‘y2axis’。 'y3axis', ... 可以指定任何或全部。

从文档中摘录的有用的轴选项

注意：确实存在其他选项。这些是最基本的。 为了清楚起见，我对其中一些进行了轻微编辑。

show

true 在图表上显示轴。

label

轴标签

showLabel

true 显示轴标签。

min

轴的最小值（以数据为单位，不是像素）。

max

轴的最大值（以数据为单位，不是像素）。

autoscale

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

如果设置了轴最小值或最大值，自动缩放将被关闭。 numberTicks、tickInterval 和 pad 选项确实适用于自动缩放，尽管 tickInterval 尚未经过测试。当自动缩放开启时，padMin 和 padMax 什么都不做。

ticks

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

numberTicks

所需的刻度数。默认是自动计算。

tickInterval

刻度之间的单位数。与 numberTicks 互斥。

showTicks

true 是否显示刻度（标记和标签）。如果在刻度本身上指定，则不会覆盖 showMark 和 showLabel 选项。

showTickMarks

true 是否显示刻度线（线交叉网格）。被刻度本身的 showTicks 和 showMark 选项覆盖。

syncTicks

true 尝试在多个轴上同步刻度间距，以便刻度和网格线对齐。然而，这对自动缩放算法有影响。一般来说，如果不需要同步刻度，自动缩放单个轴会更好。

tickSpacing

一个数字，给出图表上刻度之间的近似像素间距。在自动缩放期间使用。这个数字将是一个上限，实际间距会更小。