jQuery 不错的图表门槛

Question

我看到图表阈值 add-in allows me to chart using a line style with points as shown in this jsfiddle。

请注意，当您将 points 属性从 false 切换为 true 时，当直线穿过 x 轴的零点时会显示一些点。对于我的场景，我只想显示对应于实际数据值的点，而不是当线恰好与 x 轴相交时。

points: { show: true }

我通读了尽可能多的在线内容，但似乎找不到要配置的正确参数。感谢任何指点。

Answer 1

你不能直接实现这个，因为产生折线图的线段需要颜色变化的起点和终点，所以阈值插件必须添加这些点。

但您可以使用一种变通方法来实现它：向您的图表添加两个数据系列（具有相同数据），一个是线，一个是点 (updated fiddle):

var d1 = [];
for (var i = 0; i <= 10; i += 1) {
  d1.push([i, parseInt(Math.random() * 30 - 10)]);
}

$.plot("#placeholder", [{
  data: d1,
  threshold: {
    below: 5,
    color: "rgb(200, 20, 30)"
  },
  lines: {
    show: true,
    fill: true
  },
  points: {
    show: false
  },
  color: "rgb(200, 200, 130)"
}, {
  data: d1,
  threshold: {
    below: 5,
    color: "rgb(200, 20, 30)"
  },
  points: {
    show: true
  },
  color: "rgb(200, 200, 130)"
}]);

jQuery 不错的图表门槛

jQuery flot chart threshold

jquery

flot