在高图中为每列设置不同的颜色

我需要dynamic地为highCharts图中的每一列设置不同的颜色。 我的highCharts grph是：

options = { chart: { renderTo: 'chart', type: 'column', width: 450 }, title: { text: 'A glance overview at your contest's status' }, xAxis: { categories: ['Approved Photos', 'Pending Approval Photos', 'Votes', 'Entrants'], labels: { //rotation: -45, style: { font: 'normal 9px Verdana, sans-serif, arial' } } }, yAxis: { allowDecimals: false, min: 0, title: { text: 'Amount' } }, legend: { enabled: false }, series: [] }; series = { name: "Amount", data: [], dataLabels: { enabled: true, color: '#000000', align: 'right', x: -10, y: 20, formatter: function () { return this.y; }, style: { font: 'normal 13px Verdana, sans-serif' } } }; 

我以这种方式设置数据：

  for (var i in Data) { if (parseInt(Data[i]) != 0) { series.data.push(parseInt(Data[i])); } else { series.data.push(null); } } options.series.push(series); chart = new Highcharts.Chart(options); 

如何在这个循环中为每个数据设置不同的颜色？

Answer 1

当您将值添加到series.data中时，也可以使用点选项设置颜色，例如

series.data.push({ y: parseInt(Data[i]), color: '#FF0000' }); 

有关点选项的更多详细信息，请参阅http://www.highcharts.com/ref/#point–color

Answer 2

这是最新版本的Highcharts（目前3.0）的另一个解决scheme。

将colorByPoint选项设置为true，并定义所需的颜色顺序 。

 options = { chart: {...}, plotOptions: { column: { colorByPoint: true } }, colors: [ '#ff0000', '#00ff00', '#0000ff' ] } 

这是一个基于Highcharts Column和旋转标签演示的例子

Answer 3

尝试以下任一种方法：

方法1：

 Highcharts.setOptions({ colors: ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE'] }); 

方法2：

 var colors = ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE', '#000']; $('#bar_chart').highcharts({ chart: { type: 'column' }, title: { text: '' }, subtitle: { text: '' }, xAxis: { type: 'category' }, yAxis: { title: { text: '' } }, legend: { enabled: false }, plotOptions: { series: { borderWidth: 0, dataLabels: { enabled: false } } }, series: [{ name: '', colorByPoint: true, data: [{ name: 'Blue', y: 5.78, color: colors[0] }, { name: 'Green', y: 5.19, color: colors[1] }, { name: 'Pink', y: 32.11, color: colors[2] }, { name: 'Yellow', y: 10.04, color: colors[3] }, { name: 'Purple', y: 19.33, color: colors[4] }] }] });