JS Flot图表:2个y轴,具有相同的数据.一个有数字数据,一个有百分比

Question

我试图用Flot重新创建这样的东西:

左侧y轴代表货币,右侧y轴是基于目标的百分比(绿线)

所以在这个例子中,目标是20000美元(100%),因此需要根据右边的y轴进行对齐.

我设法得到了这个jsFiddle,但正如你所看到的,显示百分比的正确y轴与实际数据没有"对齐".

格式化轴不是问题:

var percFormatter = function(val, axis) {
    return (val * 100).toFixed() + '%';
}

但是如何使一个系列相对于两个轴？

Answer 1

您可以绘制绘图来获取第一个轴的最大值。然后使用第二轴的新最大值编辑选项。两个轴的最小值始终为 0。

var plot = $.plot($("#placeholder"), [series.money, series.goal], options);

options.yaxes[1].max = plot.getYAxes()[0].max;

$.plot($("#placeholder"), [series.money, series.goal], options);

它正在处理我的一些评论：http://jsfiddle.net/LXrLf/1/