如何为每个条形图设置不同的渐变?

时间:2017-04-26 10:00:19

标签: javascript flot

我想单独为每个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

那么我怎么能弄清楚这一点呢?

1 个答案:

答案 0 :(得分:0)

data对象中,用以下内容替换color: "..."

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

color属性主要用于条形图的轮廓(由于选项中的lineWidth: 0而无法绘制),并将用作{fillColor的后备广告。 1}}如果没有指定。

更新了小提琴:http://jsfiddle.net/TPp8m/487/