在flot情节的背景上绘制片段

Question

我想在一个flot图上绘制2个段（我有4个x坐标来确定那些：x1，x2，x3和x4）。很像：

然后在彩色区域上有一条连续的情节线。我从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/

Answer 1

您可以使用标记直接在Flot中执行此操作（请参阅文档中的here）。示例代码（有关完整示例，请参阅此fiddle）：

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