Colors FLOT：如何在同一数据系列中用一条线连接不同颜色的点？

我想我可能偶然发现了Flot的局限性，但我不确定。我试图表示一个随时间变化的数据系列。项目的“状态”表示在Y轴上（共有5个），时间表示在X轴上（项目可以随时间改变状态）。我希望图形中有点和线连接每个数据系列的这些点

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

到目前为止，我唯一看到的是能够为给定数据系列中的所有点指定颜色。有人知道有没有一种方法可以单独指定颜色吗

---

谢谢。

有3个视图，可能不值得回答我自己的问题，但以下是解决方案：

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

Flot只允许在dataseries级别指定点的颜色，这意味着每种颜色都必须是自己的dataseries。考虑到这一点，解决方案是为每种颜色创建一个单独的数据系列，并绘制只有点而没有线的数据系列。然后，我必须制作一个单独的数据系列，它是我想要用线连接的所有点，并绘制一个没有点，只有一条线的数据系列

---

因此，如果我想用五种不同的颜色显示一条穿过五个点的线，我需要6个数据系列：每个点5个，连接它们的线1个。Flot将简单地将所有内容都绘制在彼此的顶部，我相信有一种方法可以指定显示在顶部的内容（以确保点显示在线条上方）。

事实上，向Flot添加一个功能并不十分困难，该功能将回调到代码中，以获取每个点的颜色。我花了大约一个小时的时间，从任何角度看，我都不是javascript专家

如果查看

drawSeriesPoints（）

，您所要做的就是将回调参数传递到

plotPoints（）

，该参数将用于设置

ctx.strokeStyle

。我添加了一个名为

series.points.colorCallback

的选项，并且

drawSeriesPoints（）

使用该选项，或者使用一个始终返回series.color的简单函数

一个棘手的问题是：应该传递给回调函数的索引可能不是

plotPoints（）

中的

i

，而是

i/ps

---

希望这有帮助

好了，伙计。你需要用牵引钩

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

$（函数（）{
变量d2=[[0,3]，[4,8]，[8,5]，[9,13]；
变量颜色=[“cc4444”、“ff0000”、“0000ff”、“00ff00”]；
变量半径=[10,20,30,40]；
函数原始（绘图，ctx）{
var data=plot.getData（）；
var axes=plot.getAxes（）；
var offset=plot.getPlotOffset（）；
对于（变量i=0；i

非常感谢您发布此信息！很明显，我已经读过了，但我没有想到，所以你为我节省了很多时间。这可能是通过计算默认颜色，然后将其传递给一个或多个颜色“挂钩”来概括的，因为Flot调用了它的其余回调，以及关于绘制点的数据，默认颜色，这是一个完美的，在我看来是正确的答案。帮了我很大的忙。。。