绘图面积图

Question

是否可以用flot制作面积图？我注意到有一个“堆栈”插件。下图是我想要创建的效果。只有一个问题，堆栈插件自动添加组件数据。我不希望这样。我只想填写效果。

我尝试了属性之间的填充，但这会产生令人讨厌的颜色混合（见下文）：

在堆栈示例中，颜色根本不会混合。这就是我想要的视觉效果。

更新 我用来使其工作的代码是：

  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);