如何在JQuery Flot中复制Y轴

Question

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

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

JQuery Flot允许多个轴，但对于每个轴，我需要不同的数据集，例如这个例子: http://people.iola.dk/olau/flot/examples/multiple-axes.html 但我不想复制数据。我能不能告诉Flot使用相同的数据来复制y轴呢？

- Aleksandrus

Answer 1

您可以使用“hooks”功能来强制flot显示第二个y轴，即使它没有分配到数据系列：

您可以使用钩子功能来强制flot显示第二个y轴，即使它没有分配到数据系列：

// 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'} ]
});

这里有一个演示代码，展示了两种方法。

- Mark

---

先生，这个答案太棒了！从这个fiddle示例中，我注意到我可以使用钩子功能，并且它完美地工作。非常好的答案，提供了2种可能的解决方案+ Fiddle。 - Aleksandrus