Flot类别条形图的不同颜色条 [英] Different Color Bars for Flot Categories Bar Chart

问题描述

在Flot中使用类别模式时，如何为每个栏位使用不同的颜色？

How can you have a different color for each bar when using the "categories" mode in Flot?

此代码使每个栏都是 colors 数组。我想让每个小节成为颜色数组中的相应颜色。

This code makes every bar the first color in colors array. I'd like each bar to be the corresponding color in the colors array.

当前代码：

var data = [["Red",1],["Yellow",2],["Green",3]];

$.plot("#placeholder1div",[data], {
    series: {
        bars: {
            show: true,
            barWidth: 0.3,
            align: "center",
            lineWidth: 0,
            fill:.75
        }
    },
    xaxis: {
        mode: "categories",
    },
    colors: ["#FF0000","#FFFF00","#00FF00"]
}); 

推荐答案

// separate your 3 bars into 3 series, color is a series level option
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: {
        // drop the categories plugin and label the ticks yourself
        // you'll thank me in the long run
        ticks: [[0,"Red"],[1,"Yellow"],[2,"Green"]]
    }
});

产生（fiddle 此处）：

Produces (fiddle here):

这篇关于Flot类别条形图的不同颜色条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！