Flot jQuery圖表 - 在Y軸反向上填充區域的堆積線

Question

我使用FLOT繪製圖表。我的X軸是日期，我的Y軸是顛倒的（底部最大，最小頂部）。一切正常，除了堆疊的填充線（線條之間的填充區域看起來好像Y軸沒有反轉。任何想法如何反轉這兩個看起來很自然與反Y軸？

FYI：我的圖表代表在谷歌搜索引擎的每個域關鍵字排名

（用作歡迎替換呈現建議）（這是它現在的樣子）

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