代码之家 › 专栏 › 技术社区 › Matt Anxo P

Flot:如何在同一个数据系列中用一条线连接不同的彩色点?

points lines flot colors

15

Matt Anxo P · 技术社区 · 14 年前

我想我可能是偶然发现了牙线的局限性,但我不确定。随着时间的推移,我试图表示一个数据系列。项目的“状态”在Y轴上表示(其中有5个),时间在X轴上(项目可以随着时间改变状态)。我希望图中有点和线连接每个数据系列的点和线。

除了跟踪一个项目的状态随着时间的推移,我还想表示它在任何特定点的“状态”。我想通过改变点的颜色来实现这一点。这意味着单个项目可能在不同的时间具有不同的状态,这意味着对于单个数据系列,我需要一条连接不同颜色的不同点(点)的线。

到目前为止,我看到的唯一一件事就是能够为 全部的 给定数据集中的点。有人知道是否有单独指定颜色的方法吗?

谢谢。

3 回复 | 直到 11 年前

1

16

pour toi 14 年前

$(function () {

  var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
  var colors = ["#cc4444", "#ff0000", "#0000ff", "#00ff00"];
  var radius = [10, 20, 30, 40];

  function raw(plot, ctx) {
    var data = plot.getData();
    var axes = plot.getAxes();
    var offset = plot.getPlotOffset();
    for (var i = 0; i < data.length; i++) {
        var series = data[i];
        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();
        }    
    }
  };  

    var plot = $.plot(
          $("#placeholder"),
          [{ data: d2, points: { show: true } }],
          { hooks: { draw  : [raw] } }
  );  
});

2

11

Matt Anxo P 14 年前

3

5

Gideon 14 年前

drawSeriesPoints() plotPoints() ctx.strokeStyle series.points.colorCallback

i i/ps