javascript - JS Flot 图表 : 2 y-axes with the same data. 一张是数字数据，一张是百分比

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/