如何为图表的每个条设置不同的渐变？

Question

我想分别为 flot 的每个条设置不同的渐变，但它似乎只接受数据对象中的纯色。

var data = [{data: [[0,1]], color: "red"},
            {data: [[1,2]], color: "yellow"},
            {data: [[2,3]], color: "green"}];

$.plot("#placeholder",data, {
    series: {
        bars: {
            show: true,
            barWidth: 0.3,
            align: "center",
            lineWidth: 0,
            fill:.75
        }
    },
    xaxis: {
        ticks: [[0,"Red"],[1,"Yellow"],[2,"Green"]]
    }
});

这是jsfiddle

那么我该如何解决这个问题？

Answer 1

在您的 data 对象中将 color: "..." 替换为如下内容：

bars: {
  fillColor: {
    colors: ["#ff0000", "#0000ff"]
  }
}

color 属性主要用于条形图的轮廓（由于选项中的 lineWidth: 0 你不画它）并将用作后备对于 fillColor 如果未指定。

已更新 fiddle：http://jsfiddle.net/TPp8m/487/

如何为图表的每个条设置不同的渐变？

How to set different gradients to each bar of flot chart?

javascript

flot