Flot 类别条形图的不同颜色条

Question

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

此代码使每个条形成为colors数组中的第一种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"]
}); 

Answer 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>

Answer 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]]}
];

Answer 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>