flot 更改一系列数据点的颜色和线条

Question

我有一个时间序列图。我在一段时间内绘制了 1 条线。如果数据点高于某个数字，我希望它是绿色的，下面是红色的，这取决于它是什么月份。

function raw(plot, ctx) {
          var colors = ["#cc4444", "#ff0000", "#0000ff", "#00ff00"];
          var radius = [10, 20, 30, 40];
          console.log(networkTargets);

        var data = plot.getData();
        var axes = plot.getAxes();
        var offset = plot.getPlotOffset();
        console.log(data);
        console.log(axes);
        console.log(offset);
        for (var i = 0; i < data.length; i++) {
            var series = data[i];
            console.log(series);    
            for (var j = 0; j < series.data.length; j++) {


               var color = colors[j];
                var d = (series.data[j]);
                var x = offset.left + axes.xaxis.p2c(d[0]);
                var y = offset.top + axes.yaxis.p2c(d[1]);
                var r = radius[j];                
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.arc(x,y,r,0,Math.PI*2,true);
                ctx.closePath();            
                ctx.fillStyle = color;
                ctx.fill();
            }    
        }
      };

这是我的 fiddle.
第二个 fiddle 带有阈值插件。

我想做的是将每个数据点的当前时间戳与我拥有的时间戳进行比较，该时间戳将在 networkTargets 中，如果数据点值大于 networkTargets 值，然后将其涂成绿色。

Answer 1

由于您有多个月的数据并且希望每个月都有不同的阈值，最好的方法是每月将数据分成一个数据系列并在那里应用不同的阈值（参见 updated fiddle）：

  // data for dec 2015
  var data_ajax1 = {
    "lines": {
      "show": true,
      "lineWidth": 3
    },
    "points": {
      "show": false
    },
    "threshold": {
      "below": 99.50,
      "color": "rgb(204, 0, 0)"
    },
    "data": [{
      "0": 1451520000000,
      "1": 99.44
    }, ..., {
      "0": 1451602800000,
      "1": 99.49
    }]
  };

  // data for jan 2016
  var data_ajax2 = {
    "lines": {
      "show": true,
      "lineWidth": 3
    },
    "points": {
      "show": false
    },
    "threshold": {
      "below": 99.40,
      "color": "rgb(204, 0, 0)"
    },
    "data": [{
      "0": 1451602800000,
      "1": 99.49
    }, ..., {
      "0": 1452038400000,
      "1": 99.39
    }]
  };

  $.plot($('#chart1'), [data_ajax1, data_ajax2], options);

缺点是 Flot Animator 不支持开箱即用的多个数据系列。当你真的需要它时，你可能要自定义两者之一 plug-ins.

flot 更改一系列数据点的颜色和线条

flot change data points color and line in a series

flot