海軍報圖與閾值和Fillbetween

Question

我正在尋找諮詢如何，我應該/可以使用Fillbetween和閾值pluggins創建完成下面的圖表配置Flotcharts：

1. 繪製折線圖。 （完成）
2. 設置一些閾值。 （完成）
3. 設置並填充超出閾值的值。 （沒有完全完成）

這是我到目前爲止已經完成，

https://jsfiddle.net/gstoa/utv4kvw2/

$(function() { 
    var values = { 
    'avgBottom': [ 
     [1, -2], 
     [2, -2], 
     [3, -2], 
     [4, -2], 
     [5, -2] 
    ], 
    'avgTop': [ 
     [1, 3], 
     [2, 3], 
     [3, 3], 
     [4, 3], 
     [5, 3] 
    ], 
    'values': [ 
     [1, .5], 
     [2, -3], 
     [3, .8], 
     [4, 4.5], 
     [5, 6.6] 
    ] 
    }; 

    var dataset = [{ 
    data: values['values'], 
    lines: { 
     show: true 
    }, 
    color: "rgb(50,50,255)" 
    }, { 
    id: 'avgBottom', 
    data: values['avgBottom'], 
    lines: { 
     show: true, 
     lineWidth: 0, 
     fill: false 
    }, 
    color: "rgb(50,50,255)" 
    }, { 
    id: 'values', 
    data: values['values'], 
    lines: { 
     show: true, 
     lineWidth: 0.5, 
     fill: 0.2, 
     shadowSize: 0 
    }, 
    color: "rgb(50,50,255)", 
    fillBetween: 'avgBottom' 
    }, { 
    id: 'avgTop', 
    data: values['avgTop'], 
    lines: { 
     show: true, 
     lineWidth: 0, 
     fill: 0.2 
    }, 
    color: "rgb(50,50,255)", 
    fillBetween: 'values' 
    }]; 

    $.plot($("#placeholder"), dataset, { 
    xaxis: { 
     tickDecimals: 0 
    }, 
    series: { 
     lines: { 
     show: true, 
     fill: true 
     }, 
     points: { 
     show: false, 
     radius: 4 
     }, 
     color: "#62CB31", 
     //  threshold: { 
     //  below: -2, 
     //  color: "rgb(255,0,0)" 
     //  } 
    }, 
    yaxis: { 
     tickFormatter: function(v) { 
     return v; 
     } 
    } 
    }); 

    $.plot($("#placeholder"), [d1, d2, d3]); 
}); 

我想這條線圖看起來像以下：

任何意見是不勝感激。

Answer 1

要做到這一點，我不得不從fillbetween切換到fillbelow flot插件。然後，我必須修改fillbelow插件的來源，以查看該系列的新fillColor屬性（我有一個將這些更改合併回主分支的拉取請求）。總之，您的新數據集看起來像下面的代碼片段（this JSFiddle演示瞭如何讓圖表看起來像您的示例圖像）。

var dataset = [{ 
    id: 'topValues', 
    data: values['values'], 
    lines: { 
     show: true, 
    }, 
    color: "rgb(50,50,255)", 
    fillBelowTo: 'avgTop', 
    fillBelowUseSeriesObjectFillColor: false, 
    fillColor: "#FF0000" 
}, { 
    id: 'avgTop', 
    data: values['avgTop'], 
    lines: { 
     show: true, 
     lineWidth: 0, 
     fill: true 
    }, 
    color: "rgb(50,50,255)" 
}, { 
    id: 'bottomValues', 
    data: values['values'], 
    lines: { 
    show: true, 
    lineWidth: 0, 
    shadowSize: 0 
    }, 
    color: "rgb(50,50,255)" 
}, { 
    id: 'avgBottom', 
    data: values['avgBottom'], 
    lines: { 
     show: true, 
     lineWidth: 0, 
     fill: true, 
    }, 
    fillBelowTo: 'bottomValues', 
    fillBelowUseSeriesObjectFillColor: false, 
    fillColor: "#FF0000", 
    color: "rgb(50,50,255)" 
}]; 

• 的fillBelowTo屬性作用類似於在fillbetween插件的fillBetween 屬性 - 它表示到一系列你 喜歡下面填寫。
• 的fillBelowUseSeriesObjectFillColor 屬性（設置爲false）告訴我們不使用lines.fillColor 顏色，而是使用fillColor值。如果fillBelowUseSeriesObjectFillColor是true，將使用lines.fillColor顏色（在這種情況下將是藍色的）。