如何在JQuery Flot上复制Y轴

Question

我能够使用JQuery Flot,这是一个非常好的工具.但是,我找不到适合我的问题的好解决方案.

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

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

但我不想复制数据.我不能只是'告诉'Flot使用同一组数据复制yaxis吗？

Answer 1

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

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