独特的颜色为flot条形图

Question

I want to create a flot bar chart that will display true and false figures, like my example below. I want the true bar to be green and the false one to be red. I've tried using the colors array but it doesn't work properly.

My current code:

var options3 = {grid: {hoverable: true},series: {bars: {show: true,barWidth: 0.6,align: "center"}},yaxis: {min:0,tickSize: 1},xaxis: {mode: "categories",ticks: [ [0, 'True'], [1, 'False'] ],tickLength: 0},tooltip: true,tooltipOpts: {content: '%y Votes', defaultTheme: false}, colors: [ "#FF0000", "#00FF00"]};
var data3 = [ [0, 3], [1, 9] ];
$(document).ready(function() {
    $.plot('#graph3', [data3], options3);
});

Example: http://joshblease.co.uk/Maths/Admin/chart.php#graph3

Answer 1

The problem is that you have only one data series, which is assigned the first color in your array (red). You will get the result you want if you replace

var data3 = [ [0, 3], [1, 9] ];

with

var data3 = [
    [[0, 3]],
    [[1, 9]]
];

Then use data3 in the plot instead of [data3] . See the jsFiddle .