Highcharts设置每个月的列颜色

Question

我的最后一个问题是用我的图表解决的。我一年中的每个月都有不同数量的列。我要做的是为每列分配一组颜色。我已经阅读并尝试了很多方法但没有成功。

我的代码。

$(function () {

var colors = ['#999999', '#009900', '#FF6600', '#CC0000', '#FF0000'],
colorIterator = 0;
var chart;
$(document).ready(function() {
$.getJSON("../charts/1-2-4-overall_year_chart.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column',
marginRight: 130,
marginBottom: 25,

events:{
load:function() {
var chart = this,
series = chart.series,
each = Highcharts.each;

each(series, function(serie, i) {
each(serie.data, function(data, j) {
data.update({
color: colors[colorIterator]
},false);
colorIterator++;
});
});

chart.redraw();
}
}
},

title: {
text: 'Monthly trend',
x: -20 //center
},

subtitle: {
text: '',
x: -20
},

xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

yAxis: {
endOnTick: false,
max:11,
showFirstLabel: false,
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:2,
tickInterval: 10,
gridLineColor:'#ddd',
title: {
text: 'Count',
style: {
fontFamily: 'Tahoma',
color: '#000000',
fontWeight: 'bold',
fontSize: '8px'
}
},
zIndex: 10,
label: {
text: 'Maximum  %',
align: 'center',
x: -10,
y: -10,
style: {
color: '#FF0000'
}
}
},


credits: {
enabled: false
},

tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},

legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 1
},



plotOptions: {
column: {
colorByPoint: true
},


series: {
cursor: 'pointer',
pointWidth: 6,
point: {
events: {
//click: function() {
//location.href = "feedback-items_detractors_iframe.php?FromDate1=<?php echo $StartDate;?>&ToDate1=<?php echo $EndDate;?> target='iframe2'";
//}
}
},
legendIndex:0,

dataLabels: {
enabled: true,
color: '#000000',
align: 'center',
cursor: 'pointer',
borderRadius: 5,
backgroundColor: 'rgba(252, 255, 255, 255)',
borderWidth: 1,
borderColor: '#AAA',
y: -6,
format: '{y:.1f}', // one decimal
y: -20, // 10 pixels down from the top
style: {
textShadow: false,
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
}

},



series: json,

});
});

});

$('#resizer').resizable({
// On resize, set the chart size to that of the
// resizer minus padding. If your chart has a lot of data or other
// content, the redrawing might be slow. In that case, we recommend
// that you use the 'stop' event instead of 'resize'.
resize: function () {
chart.setSize(
this.offsetWidth - 20,
this.offsetHeight - 20,
false
);
}
});

});

这就是我想要做的

如果有人知道如何做到这一点，那将非常有帮助。

提前感谢您的时间。

Answer 1

将colorByPoint选项配置为true并设置所需的颜色序列。

options = {
    chart: {...},
    plotOptions: {
        column: {
            colorByPoint: true
        }
    },
    colors: [
        // set colors
    ]
}

示例小提琴：http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/column-colorbypoint-true/

Answer 2

通过使用颜色解决了这个问题：['＃333333'，'＃009900'，'＃FF6600'，'＃CC0000'，'＃FF0000']，plotOptions：{column：{colorByPoint：false}，< / p>