I'm trying to set the colours of my jqplot bar chart bars. There will always be six bars present, grouped int开发者_如何转开发o sets of 2 bars. Here is an example of the data being plotted:
line1 = [6000, 5000, 5500];
line2 = [16000, 10000, 14000];
I've used the following so far:
seriesColors: ["#F3CBBF", "#BFDDE5", "#CF3501", "#027997", "#CF3501", "#027997"],
But jqplot alternates between the first 2 bars each time instead of using all of the declared colours. This is probably as it only determines 2 series being present, one per set of data.
Is there a way to set the bar colours explicitly?
I do this using the varyBarColor method so you can list the different colours for the bars in a simple array like you have done already but if there is only one series it will use these colors for each bar instead. Here is an example of my code:
plot1 = $.jqplot('chart1', [s1], {
title: 'Example Income Graph',
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions:{ varyBarColor : true },
pointLabels: { show : true }
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
label:'Net Growth (%)',
ticks: ticks
},
yaxis:{
label:'Income (£)',
tickOptions:{ formatString:'%d'},
autoscale:true,
min:0,
max:10000
}
},
seriesColors: [ "#eee", "#ccc", "#999"],
highlighter: { show: false }
});
In this graph I had one series with 3 bars and they are each a different colour grey.
This is pretty old, but still doesn't have the right answer, and it took me a while to figure it out, so here it goes.
You need two things: Set the varyBarColor and a series array that contains the series colors for each series, passed at the same level as seriesDefaults, such as:
plot1 = $.jqplot('chart1', [s1, s2], {
title: 'Example',
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions:{ varyBarColor : true },
pointLabels: { show : true }
},
series: [{seriesColors: ["#F3CBBF", "#BFDDE5", "#CF3501"]},
{seriesColors: ["#027997", "#CF3501", "#027997"]}]
}
try like this
series:[{renderer:$.jqplot.BarRenderer , seriesColors: ["#F3CBBF", "#BFDDE5", #CF3501","#eee", "#ccc", "#999"] }]
精彩评论