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.

sin(x) and cos(x) for x in degrees.

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

How do I set up jqPlot PlotOptions to add x and y labels, change scales, and add a second X axis?

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.

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.

html5csv + jqplot dual line graph without special axes

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 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 Axis formatting options documentation shows all the options to configure axis labels, ticks, etc. for a particular axis if I could create one.

How do I proceed from here?

回答1:

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

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.

Here are the finished examples:

Part 1: Customized set of single axes

Output

jqplot PlotOptions Input

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

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>

---

Part 2: Dual X axes, with degrees and radians scales

Output

jqPlot PlotOptions Input

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>

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.

---

Reference

From the jqPlot Axis docs:

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

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 to display the axis on the graph.

label

Label for the axis

showLabel

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.

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, ...] 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

number of units between ticks. Mutually exclusive with numberTicks.

showTicks

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 to show the tick marks (line crossing grid) or not. Overridden by showTicks and showMark option of tick itself.

syncTicks

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.

来源：https://stackoverflow.com/questions/31977498/how-to-add-2nd-horizontal-x-axis-scale-to-jqplot-and-customize-axis-settings