如何在JQuery Flot上复制Y轴

我能够使用JQuery Flot，这是一个非常好的工具。 但是，我无法找到解决问题的好方法。

我想要复制Y轴，所以我可以在左边显示1，在右边显示1，因此用户在比较图表最右边的数据时，不必滚动图表的最左边。 我假设他们将通过智能手机访问它。

JQuery Flot允许多个轴，但是对于每个轴，我需要一组不同的数据，如下例所示： http ： //people.iola.dk/olau/flot/examples/multiple-axes.html

但我不想复制数据。 我不能只是’告诉’Flot使用相同的数据集复制yaxis吗？

Answer 1

您可以使用钩子function强制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'} ] }); 

这是展示这两种方法的小提琴 。