Flot jQuery 图表 - 在反向 Y 轴上填充区域的堆积线

Question

我正在使用 FLOT 来渲染我的图表。我的 X 轴是日期，我的 Y 轴是反转的（底部最大值，顶部最小值）。除了堆叠的填充线（线条之间的填充区域看起来好像 Y 轴没有反转。知道如何反转这两个以使反转的 Y 轴看起来自然吗？

仅供参考：我的图表代表了谷歌搜索引擎上每个域的关键字排名（欢迎提供替代呈现的建议​​）

（这就是现在的样子）

Answer 1

猴子修补jquery.flot.js 文件 (http://www.flotcharts.org/flot/jquery.flot.js)，第 2401 到 2411 行，反转画布填充路径即可：

// now first check the case where both is outside
if (y1 >= axisy.max && y2 >= axisy.max) {
    ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.max));
    ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.max));
    continue;
}
else if (y1 <= axisy.min && y2 <= axisy.min) {
    ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.min));
    ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.min));
    continue;
}

您需要在第一个if 中将axisy.max 更改为axisy.min，反之亦然。这里生成的代码：

// now first check the case where both is outside
if (y1 >= axisy.max && y2 >= axisy.max) {
    ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.min));
    ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.min));
    continue;
}
else if (y1 <= axisy.min && y2 <= axisy.min) {
    ctx.lineTo(axisx.p2c(x1), axisy.p2c(axisy.max));
    ctx.lineTo(axisx.p2c(x2), axisy.p2c(axisy.max));
    continue;
}