如何在JQuery Flot上复制Y轴 [英] How to duplicate Y Axis on JQuery Flot

问题描述

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

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

JQuery Flot允许多个轴，但对于每个轴，我需要一组不同的数据，如此示例：
功能强制flot显示第二个yaxis甚至虽然它没有分配数据系列：

  //挂钩函数将轴标记为已使用
 / /并从左轴分配min / max 
 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'} //添加第二轴
] 
}）; 
  

根据轴的配置方式，这可能会很麻烦。你必须从左轴窃取参数才能使它工作（正如我上面用datamin / datamax所做的那样）。

如果是我的代码，我会选择你的重复数据方法。你并没有真正复制任何东西，只是将相同的数组分配给两个系列。然后我将第二个系列配置为不绘制。

  var d2 = [[0,3]，[4， 8]，[8,5]，[9,13]]; 
 
 //使用相同的数据，但切换线... 
 $ .plot（＃placeholder，[{data：d2}，{data：d2，yaxis：2 ，行：{show：false}}]，{
 yaxes：[{}，
 {position：'right'}] 
}）; 
  

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

I'm being able to use JQuery Flot, and it's a very nice tool. However, I could not find a GOOD solution for my problem.

I want to duplicate Y axis, so I can display 1 on the left and 1 on the right, so the users, when comparing data from the rightmost side of the chart, won't have to scroll through the leftmost side of the chart. I'm assuming they will be accessing it through a smartphone.

JQuery Flot allows multiple axis, but for each axis, I would need a different set of data, as in this example: http://people.iola.dk/olau/flot/examples/multiple-axes.html

But I don't want to duplicate the data. Can't I just 'tell' Flot to duplicate the yaxis using the same set of data?

解决方案

You can use the hooks functionality to force flot to show the second yaxis even though it has no data series assigned to it:

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

Depending on how your axis is configured though, this might be messy. You'll have to steal parameters from the left axis to get it to work (as I've done above with datamin/datamax).

If it was my code, I'd go with your duplicate data approach. You aren't really duplicating anything, just assigned the same array to two series. I'd then configure the 2nd series to simply not draw.

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

Here's a fiddle demonstrating the two approaches.

这篇关于如何在JQuery Flot上复制Y轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！