在浮点图的背景上绘制线段

Question

我想在一个浮点图上绘制 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 是什么。我有一个浮动图：

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 是选项的一部分吗？或者这是一个额外的新 canvas？我还没想好把它放在哪里。

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

Answer 1

您可以通过使用标记直接在 Flot 中执行此操作（有关完整示例，请参阅 here in the documentation). Example code (see this fiddle）：

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

在浮点图的背景上绘制线段

Drawing segments over the background of a flot plot

javascript

flot