javascript - 如何为流程图的每个条形设置不同的梯度？

Question

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

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/