在高图中为每列设置不同的颜色 [英] set different colors for each column in highcharts

问题描述

我需要为highCharts图形中的每个列动态地设置不同的颜色。
我的highCharts grph是：

I need to set different colors for each column in highCharts graph dynamically. my highCharts grph is:

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'
            }
        }
    };

我以这种方式设置数据：

And i set the data in this way:

         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);

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

How i can set different colors for each data in this loop?

推荐答案

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

When you add the value to the series.data you can also set the color using the point options e.g

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

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

For more details about the point options see http://www.highcharts.com/ref/#point--color

这篇关于在高图中为每列设置不同的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！