为highcharts中的每列设置不同的颜色

Question

我需要动态地为Highcharts图中的每一列设置不同的颜色.我的Highcharts图是:

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

这是另一个使用最新版Highcharts(目前为3.0)的解决方案.

将colorByPoint选项设置为true并定义所需的颜色序列.

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

下面是一个例子基于Highcharts 柱与旋转标签演示

Answer 2

将值添加到series.data时,您还可以使用点选项设置颜色,例如

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

有关点选项的更多详细信息,请参阅https://api.highcharts.com/class-reference/Highcharts.Point#color

Answer 3

尝试以下任一方法：

方法1：

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

方法二：

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]

            }]
        }]
    });