我能够使用 JQuery Flot,这是一个非常好的工具。但是,我找不到适合我的问题的解决方案。
我想复制 Y 轴,这样我就可以在左边显示 1,在右边显示 1,这样用户在比较图表最右边的数据时,就不必滚动到图表的最左边了图表。我假设他们将通过智能手机访问它。
JQuery Flot 允许多轴,但对于每个轴,我需要一组不同的数据,如本例所示: http://people.iola.dk/olau/flot/examples/multiple-axes.html
但我不想复制数据。我不能只“告诉”Flot 使用同一组数据复制 yaxis 吗?
最佳答案
您可以使用 hooks强制 flot 显示第二个 yaxis 的功能,即使它没有分配给它的数据系列:
// hook function to mark axis as "used"
// and assign min/max from left axis
pOff = function(plot, offset){
plot.getYAxes()[1].used = true;
plot.getYAxes()[1].datamin = plot.getYAxes()[0].datamin;
plot.getYAxes()[1].datamax = plot.getYAxes()[0].datamax;
}
$.plot("#placeholder2", [ { data: d2 } ], {
hooks: { processOffset: [pOff] },
yaxes: [ {},
{position: 'right'} // add second axis
]
});
不过,根据您的轴的配置方式,这可能会很困惑。您必须从左轴窃取参数才能使其正常工作(正如我在上面对 datamin/datamax 所做的那样)。
如果这是我的代码,我会采用您的重复数据方法。你并没有真正复制任何东西,只是将同一个数组分配给两个系列。然后我会将第二个系列配置为不绘制。
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
// use the same data but toggle off the lines...
$.plot("#placeholder", [ { data: d2 }, {data: d2, yaxis: 2, lines: {show: false}} ], {
yaxes: [ {},
{position: 'right'} ]
});
这是一个 fiddle演示这两种方法。
关于javascript - 如何在 JQuery Flot 上复制 Y 轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23994640/