Flot區域圖表

Question

是否可以在區域中製作區域圖？我注意到有一個「堆棧」插件。下面的圖片是我想創建的效果。只有一個問題，堆棧插件自動添加組件數據。我不想那樣。我只想要填充效果。

我試圖性能之間的填充，而是讓一個惱人的混色（見下文）：

在堆棧的例子中，顏色不融合的。這是我要做的視覺效果。

UPDATE 我用來做它的工作代碼爲：

var dataSet = [ 
     {id: "A", label: "Demand (kW)", color: "#2980B9", data: d, lines: { show: true, lineWidth: 1, fill: .5}}, 
     {id: "B", label: "Demand (kW)", color: "#D35400", data: d2, lines: { show: true, lineWidth: 1, fill: .5 }, fillBetween: "A"}, 
     {id: "C", label: "Demand (kW)", color: "#C0392B", data: d3, lines: { show: true, lineWidth: 1, fill: .5 }, fillBetween: "B"} 
    ] 

Answer 1

是的，你可以set the fill color折線圖生產面積圖。

設置填充顏色低於線圖：

var placeholder = $("#placeholder"); 
var data = []; 

var options = { 
    series: { 
     lines: { show: true, fill: true, fillColor: "rgba(86, 137, 191, 0.8)" }, 
     points: { show: true, fill: false } 
    } 
}; 

$.plot(placeholder, data, options); 

編輯： 看結果後，這裏就是我得到了它的工作。您需要包含Stack和FillBetween插件（我必須按照該順序執行）：

var placeholder = $("#placeholder"); 

var data = [ 
    {data: data1, id: "Data1ID"}, 
    {data: data2, id: "Data2ID", fillBetween: "Data1ID"}, 
    {data: data3, id: "Data3ID", fillBetween: "Data2ID"} 
] 

var options = { 
    series: { 
     lines: { show: true, fill: true }, 
     points: { show: true, fill: false } 
    } 
}; 

$.plot(placeholder, data, options);