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/