绘制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;
}

您需要在第一个axisy.max中使用axisy.min更改if，而在第二个// 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; } 中反之。结果代码如下：

file.seekg(0, ios::end)