15

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

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

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

谢谢。

4

3 回答 3

16

你去吧，伙计。你需要使用一个draw hook。

$(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] } }
  );  
});
于 2010-09-29T13:00:33.873 回答
11

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

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

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

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

于 2010-02-17T20:36:29.980 回答
5

实际上，向 flot 添加一个功能并不难，该功能会回调到您的代码中以获取每个点的颜色。我花了大约一个小时，无论如何我都不是 javascript 专家。

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

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

希望这可以帮助！

于 2010-03-11T23:27:55.887 回答