javascript - 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/