我认为我可能发现了Flot的一个限制，但我不确定。我正在尝试表示单个数据系列随时间变化的状态。"State" 在 Y 轴上表示（有 5 个），时间在 X 轴上（物品可以随时间改变状态）。我希望图表中有点和连接这些点的线来表示每个数据系列。
除了跟踪物品随时间的状态外，我还想表示物品在任何特定点的"Status"。我想通过更改这些点的颜色来实现此目的。这意味着单个物品可能在不同的时间具有不同的状态，这意味着对于单个数据系列，我需要连接不同颜色的不同点（圆点）的线。
到目前为止，我看到的唯一能力是指定给定数据系列中所有点的颜色。是否有人知道是否有办法逐个指定颜色？
谢谢。
这就是你所需要的。你需要使用一个绘制钩子。
$(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] } }
);
});
有3种视图，可能不值得回答我的问题，但是这里是解决方案：
我的原始问题是如何绘制一个数据系列的点和一条线，但每个点都是我指定的颜色。
Flot只允许在数据系列级别上指定点的颜色，这意味着每个颜色必须成为自己的数据系列。考虑到这一点，解决方案是为每种颜色制作单个数据系列，仅使用点绘制该数据系列，而无需线条。然后我必须创建一个单独的数据系列，其中包含我想要用线连接的所有点，并仅用线绘制该数据系列。
因此，如果我想要显示通过5个不同颜色的点的线，我需要6个数据系列：5个代表每个点，1个代表连接它们的线条。Flot将简单地将所有内容绘制在彼此之上，我相信有一种方法可以指定应该显示在最上层（以确保点显示在线条上方）。