在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图的背景上绘制线段

回答

相关问题