带有阈值和填充之间的图表

Question

我正在寻求有关如何使用 Fillbetween 和 Threshold 插件 should/can 配置 Flotcharts 以创建可完成以下任务的图表的建议：

绘制折线图。（完成）
设置一些阈值。（完成）
设置并填充超出阈值的值。（未完成）

这是我到目前为止所取得的成就，

$(function() {
  var values = {
    'avgBottom': [
      [1, -2],
      [2, -2],
      [3, -2],
      [4, -2],
      [5, -2]
    ],
    'avgTop': [
      [1, 3],
      [2, 3],
      [3, 3],
      [4, 3],
      [5, 3]
    ],
    'values': [
      [1, .5],
      [2, -3],
      [3, .8],
      [4, 4.5],
      [5, 6.6]
    ]
  };

  var dataset = [{
    data: values['values'],
    lines: {
      show: true
    },
    color: "rgb(50,50,255)"
  }, {
    id: 'avgBottom',
    data: values['avgBottom'],
    lines: {
      show: true,
      lineWidth: 0,
      fill: false
    },
    color: "rgb(50,50,255)"
  }, {
    id: 'values',
    data: values['values'],
    lines: {
      show: true,
      lineWidth: 0.5,
      fill: 0.2,
      shadowSize: 0
    },
    color: "rgb(50,50,255)",
    fillBetween: 'avgBottom'
  }, {
    id: 'avgTop',
    data: values['avgTop'],
    lines: {
      show: true,
      lineWidth: 0,
      fill: 0.2
    },
    color: "rgb(50,50,255)",
    fillBetween: 'values'
  }];

  $.plot($("#placeholder"), dataset, {
    xaxis: {
      tickDecimals: 0
    },
    series: {
      lines: {
        show: true,
        fill: true
      },
      points: {
        show: false,
        radius: 4
      },
      color: "#62CB31",
      //      threshold: {
      //        below: -2,
      //        color: "rgb(255,0,0)"
      //      }
    },
    yaxis: {
      tickFormatter: function(v) {
        return v;
      }
    }
  });

  $.plot($("#placeholder"), [d1, d2, d3]);
});

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

非常感谢任何建议。

Answer 1

为此，我不得不从系列的 fillbetween to the fillbelow flot plugin. I then had to modify the source of the fillbelow plugin to look at a new 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 属性的 fillbetween 插件 - 它表示你想要哪个系列喜欢就往下填。
fillBelowUseSeriesObjectFillColor 属性（设置为 false）告诉我们不要使用 lines.fillColor 颜色，而是使用 fillColor 值。如果 fillBelowUseSeriesObjectFillColor 是 true，将使用 lines.fillColor 颜色（在本例中为蓝色）。

带有阈值和填充之间的图表

Flot chart with Threshold and Fillbetween

flot