浮动类别条形图的不同颜色条答案

【问题标题】：Different Color Bars for Flot Categories Bar Chart浮动类别条形图的不同颜色条
【发布时间】：2014-04-24 15:18:39
【问题描述】：

在 Flot 中使用“类别”模式时，如何为每个条设置不同的颜色？

此代码使每个条形图成为colors 数组中的第一个颜色。我希望每个条都成为 colors 数组中的相应颜色。

当前代码：

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"]
});

【问题讨论】：

标签： javascript jquery css flot

【解决方案1】：

按照我对 Flot 的建议，删除插件并自行配置。

// 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"]]
    }
});

运行代码：

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"]]
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>
<div id="placeholder" style="width:400px; height: 300px"></div>

【讨论】：

感谢您的fill: .75。我使用的是fill: true，只得到了 50%。看到你的回答后，我明白了fill的真正用途，你在其中指定了不透明度。

【解决方案2】：

当您放入数据时，您必须将颜色放入：

var data = [
    {color: '#ff00aa', data: [[0, 1]]},
    {color: 'red', data: [[1, 1]]},
    {color: 'yellow', data: [[2, 2],[3, 2]]},
    {color: 'orange', data: [[4, 2]]},
    {color: 'blue', data: [[5, 4],[6, 7]]},
    {color: '#000000', data: [[7, 1]]}
];

【讨论】：

【解决方案3】：

使用下面的配置

// Colors 
var color01 = '#00cde2';
var color02 = '#ffb700';
var color03 = '#7ac70c';
var color04 = '#313541';
var color05 = '#fc3232';
var color06 = '#1cb0f6';
var color07 = '#00c07f';

var data = [
            {data: [[0, 4.1]], color: color01},
            {data: [[1, 1.8]], color: color02},
            {data: [[2, 2]], color: color03},
            {data: [[3, 4.5]], color: color04},
            {data: [[4, 3.7]], color: color05},
            {data: [[5, 5.6]], color: color06},
            {data: [[6, 2.6]], color: color07}
        ];

        $.plot($("#placeholder"), data, {
            series: {
                lines: {
                    fill: false
                },
                points: {show: false},
                bars: {
                    show: true,
                    align: 'center',
                    barWidth: 0.5,
                    fill: 1,
                    lineWidth: 1
                }
            },
            xaxis: {
                tickLength: 0,
                ticks: [
                    [0, "Data One"],
                    [1, "Data Two"],
                    [2, "Data Three"],
                    [3, "Data Four"],
                    [4, "Data Five"],
                    [5, "Data Six"],
                    [6, "Data Seven"]]
            },
            yaxis: {
                min: 0
            },
            grid: {
                hoverable: true,
                backgroundColor: {
                    colors: ["#fff", "#fff"]
                },
                borderWidth: {
                    top: 1,
                    right: 1,
                    bottom: 2,
                    left: 2
                },
                borderColor: {
                    top: "#e5e5e5", 
                    right: "#e5e5e5",
                    bottom: "#a5b2c0",
                    left: "#a5b2c0"
                }
            }
        });

@import 'https://fonts.googleapis.com/css?family=Open+Sans';
#placeholder{
    font-family: 'Open Sans', sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>

<div id="placeholder" style="width:100%; height: 300px"></div>

【讨论】：