绘制具有阈值和填充的图表

Question

我正在寻找有关如何/可以使用Fillbetween和Threshold插件配置Flotcharts以创建完成以下内容的图表的建议：

1. 绘制折线图。 （完成）
2. 设置一些阈值。 （完成）
3. 设置和填充超出阈值的值。 （还没完成）

这是我迄今为止所取得的成就，

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

savefiledialog1.InitialDirectory = "your/path"

我希望此折线图如下所示：

非常感谢任何建议。

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的行为类似 插件之间填充的属性 - 它表示你是哪个系列 喜欢在下面填写。
• fillBelowUseSeriesObjectFillColor property（设置为false）告诉我们不要使用lines.fillColor 颜色，而是使用fillColor值。如果fillBelowUseSeriesObjectFillColor为true，则会使用lines.fillColor颜色（在这种情况下为蓝色）。