Question

我有时间序列图。我在一段时间内画了一条线。根据数据点高于某个数字的月份，我希望它是绿色，而下面是红色。

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不支持开箱即用的多个数据系列。当您真正需要它时，您可能必须自定义两个插件中的一个。

flot更改数据点颜色和系列中的行

1 个答案: