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

时间：2015-08-13 00:15:57

标签： javascript jqplot

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

jqplot with default settings

sin（x）和cos（x），以度为单位。

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

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

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

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

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显示了为特定轴配置轴标签，刻度等的所有选项，如果我可以创建一个。

我如何从这里开始？

1 个答案:

答案 0 :(得分：0)

请勿拨打new Axis();这是在jqPlot内部为您完成的。

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

以下是完成的示例：

第1部分：自定义单轴组

输出

with customization

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

＆＃13;
＆＃13; 
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();
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

输出

with second x axis

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
    }
  }
};

＆＃13;
＆＃13; 
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();
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

注意：无需在此处拨打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

     

如果自动调整轴最小值和最大值以提供合理的刻度间距，则为true。

     

如果设置了轴最小值或最大值，则将关闭自动缩放。尽管tickInterval尚未经过测试，但numberTicks，tickInterval和pad选项可以用于自动缩放。打开自动缩放时，padMin和padMax不执行任何操作。

     

ticks

     

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

     

numberTicks

     

所需的滴答数。默认是自动计算。

     

tickInterval

     

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

     

showTicks

     

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

     

showTickMarks

     

如果显示刻度线（线交叉网格），则为true。由showTicks和showMark选项覆盖tick本身。

     

syncTicks

     

如果尝试在多个轴上同步刻度线间距以使刻度线和网格线对齐，则为true。然而，这对自动缩放算法有影响。通常，如果不必同步刻度，则自动缩放单个轴将更好。

     

tickSpacing

     

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

相关问题
最新问题