Установить разные цвета для каждого столбца в highcharts

Мне нужно установить разные цвета для каждого столбца в графике 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);

Как я могу установить разные цвета для каждого из данных в этом цикле?

Ответ 1

Когда вы добавляете значение в файл series.data, вы также можете установить цвет с помощью параметров точки, например,

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

Подробнее о параметрах точки см. http://www.highcharts.com/ref/#point--color

Ответ 2

Вот еще одно решение с последней версией Highcharts (в настоящее время 3.0).

Установите для параметра colorByPoint значение true и определите цветную последовательность , которые вы хотите.

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

Вот пример на основе Highcharts Столбец с повернутыми этикетками demo

Ответ 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]

            }]
        }]
    });