javascript - 地块面积图

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

是的，您可以设置折线图的填充颜色以生成面积图。

为折线图设置下面的填充颜色：

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