FLOT:如何在同一数据系列中制作不同颜色的点,用线连接？

Question

我想我可能偶然发现了Flot的限制,但我不确定.我试图代表一个单一的数据系列.项目的"状态"表示在Y轴上(其中有5个),时间在X轴上(项目可以随时间改变状态).我希望图形具有连接每个数据系列的那些点的点和线.

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

到目前为止,我唯一看到的是能够为给定数据中的所有点指定颜色.有谁知道是否有办法单独指定颜色？

谢谢.

Answer 1

在那里你去交配.你需要使用画钩.

$(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] } }
  );  
});

Answer 2

有3个视图,可能不值得回答我自己的问题,但这是解决方案:

我最初的问题是如何绘制点和线的数据集,但每个点都是我指定的颜色.

Flot仅允许在数据级别指定点的颜色,这意味着每种颜色必须是其自己的数据.考虑到这一点,解决方案是为每种颜色制作一个数据集,并仅使用点绘制该数据集,而不绘制任何行.然后我必须创建一个单独的数据集,这是我希望通过该行连接的所有点,并绘制一个没有点,只有一行.

因此,如果我想要显示一条经过五个不同颜色的5个点的线,我需要6个数据集:每个点5个,连接它们的线1个.Flot将简单地将所有内容绘制在一起,我相信有一种方法可以指定在顶部显示的内容(以确保点显示在线上方).

Answer 3

实际上,将一个功能添加到flot并不是很困难,它会回调到您的代码中以获取每个点的颜色.我花了大约一个小时,而且无论如何我都不是javascript专家.

如果你看一下drawSeriesPoints(),你所要做的就是传递一个plotPoints()将用于设置的回调参数ctx.strokeStyle.我添加了一个名为的选项series.points.colorCallback,并drawSeriesPoints()使用它,或者一个总是返回series.color的简单函数.

一个棘手的问题:你应该传递给你的回调的索引可能不是iin plotPoints(),而是i/ps.

希望这可以帮助!