如何向 jqplot 添加第二个水平 x 轴刻度并自定义轴设置？
How to add 2nd horizontal x axis scale to jqplot and customize axis settings?
注意：虽然这是一个 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 显示为特定轴配置轴标签、刻度等的所有选项（如果我可以创建的话）。
我该如何从这里开始？
不要调用 new Axis(); 这是在 jqPlot 内部为您完成的。
基本上，如果您在 plotOptions 中声明正确的键，Axis 将为您设置。但如果密钥丢失或命名错误，显然会失败。
这里是完成的例子：
第 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 坐标。
参考
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.
有用的轴选项摘自文档
注意：确实存在其他选项。这些是最基本的。
为了清楚起见，我对其中一些进行了轻微编辑。
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.
注意：虽然这是一个 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 显示为特定轴配置轴标签、刻度等的所有选项（如果我可以创建的话）。
我该如何从这里开始？
不要调用 new Axis(); 这是在 jqPlot 内部为您完成的。
基本上，如果您在 plotOptions 中声明正确的键，Axis 将为您设置。但如果密钥丢失或命名错误，显然会失败。
这里是完成的例子：
第 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 坐标。
参考
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.
有用的轴选项摘自文档
注意：确实存在其他选项。这些是最基本的。 为了清楚起见，我对其中一些进行了轻微编辑。
showtrue to display the axis on the graph.
labelLabel for the axis
showLabeltrue to show the axis label.
minminimum value of the axis (in data units, not pixels).
maxmaximum value of the axis (in data units, not pixels).
autoscaletrue 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.
ticks1D [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.
numberTicksDesired number of ticks. Default is to compute automatically.
tickIntervalnumber of units between ticks. Mutually exclusive with numberTicks.
showTickstrue to show the ticks (both marks and labels) or not. Will not override showMark and showLabel options if specified on the ticks themselves.
showTickMarkstrue to show the tick marks (line crossing grid) or not. Overridden by showTicks and showMark option of tick itself.
syncTickstrue 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.
tickSpacingA number giving approximate pixel spacing between ticks on graph. Used during autoscaling. This number will be an upper bound, actual spacing will be less.