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

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

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

制作（ 在这里小提琴）：

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