绘图面积图

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