flotプロットの背景にセグメントを描画する

Question

フロートプロット上に2つのセグメントを描画したい（x1、x2、x3、x4を決定する4つのx座標があります）。多くのように：

しかし、その後、色の領域を超える継続プロットラインを持ちます。私はこの画像をthis blogpostから見つけました。コードを見ましたが、色付けされた領域をどのように転送するかわかりません。

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

しかし、私はCTXが何であるかを見つけ出すように見えることはできません。

私はgit codeからこのコマンドを使用する必要があると思います。私はフロートグラフを持っています：

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" } 
]