在flot圖的背景上繪製線段

我想在flot圖上繪製2個線段（我有4個x座標來確定那些：x1，x2，x3和x4）。就像：在flot圖的背景上繪製線段

但隨後有一個持續的情節線在彩色區域。我從this blogpost中發現了這個圖片，並且我已經查看了代碼，但我似乎無法弄清楚如何轉移有色區域。

我想我需要從git code使用這個命令：

ctx.fillRect(x1 + offset.left, offset.top, x2 - x1, plotHeight - offset.bottom - offset.top);

但我似乎無法弄清楚CTX是什麼。我有一個flot圖：

tensionPlot = new CustomPlot(placeholder, [ { data: dataD}, { data: dataM}, { data: dataK}, {label:"first data", data:dataK}, {label:"Second data", data:dataM},{label:"Third data", data:dataD} ] 
, options, dataSync);

但是ctx的一部分選項？或者是一個額外的新畫布？我還沒有想出哪裏，以適應這一點。

http://joeloughton.com/blog/web-applications/flot-plugins-x-gap-threshold/

來源

2016-09-18 dorien

您可以通過使用標識（見文檔中here）直接做在海軍報。示例代碼（見本fiddle爲一個完整的例子）：

markings: [ 
    { xaxis: { from: 150, to: 200 }, color: "#ff8888" }, 
    { xaxis: { from: 500, to: 750 }, color: "#ff8888" } 
]

來源

2016-09-19 08:39:51 Raidri

謝謝你，我一直在試圖動態做到這一點，但至今沒有運氣。我想我有一些錯誤的命令：this.plot.getOptions（）。grid.markings.axis.from = 50; this.plot.getOptions（）。grid.markings.axis.to = 500; this.plot.getOptions（）。grid.markings.color =「＃ff8888」; this.plot.setupGrid（）; this.plot.draw（）; – dorien

'xaxis'，而不是'axis' – Raidri

在flot圖的背景上繪製線段

回答

相關問題