javascript - Highcharts 根据类别值更改栏背景颜色

Question

我正在使用 Highcharts，想知道是否可以将每个系列组中的顶部栏设置为不同颜色，然后将每个系列组中的第二个栏设置为默认背景色。

我不能使用颜色数组，因为这会给我重新加载数据的方式带来问题。所以我认为唯一的方法是使用 Javascript，我能够获得每个类别的值，但不知道如何更改 attr 颜色。我有一个 jsFiddle http://jsfiddle.net/KrTbz/13/

这是我的javascript:

        function custom() {


            var chart;
            $(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        type: 'bar',
                        backgroundColor: 'transparent',
                    },
                    title: {
                        text: null
                    },
                    subtitle: {
                        text: null
                    },
                    xAxis: {
                        tickLength: 0,
                        lineWidth: 0,
                        categories: ['RED', 
                                     'BLUE', 
                                     'PINK', 
                                     'ORANGE'],
                        title: {
                            text: null
                        },
                        labels: {
                            color: 'orange',
                            x: 5,
                            useHTML: true,
                            formatter: function () {
                                console.log(this);
                                return {
                                    'RED': '1ST BAR IS RED',
                                    'BLUE': '1ST BAR IS BLUE',
                                    'PINK': '1ST BAR IS PINK',
                                    'ORANGE': '1ST BAR IS ORANGE'
                                }[this.value];
                            }

                        }
                    },
                    yAxis: {
                        max: 100,
                        min: 0,
                        gridLineWidth: 0,
                        title: {
                            text: null
                        },
                        labels: {
                            enabled: false,
                        }
                    },
                    tooltip: {
                        enabled: false
                    },
                    plotOptions: {
                        bar: {
                            dataLabels: {
                                enabled: true,
                                color: '#f60'
                            },
                            borderWidth: 0,
                            borderRadius: 3
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    credits: {
                        enabled: false
                    },

        //SERIES AND DATA ARRAY FORMAT NEEDS TO STAY THIS WAY                
                    series: [{
                        color: 'silver', //DEFAULT COLOR OF SECOND BAR ON EACH GROUP
                        name: 'Previous',
                        shadow: false,
                        data : [10, 20, 40, 50]
                            }, {
                        color: 'silver', //DEFAULT COLOR OF SECOND BAR ON EACH GROUP
                        name: 'Current',
                        shadow: false,
                        data : [50, 30, 20, 10]
                           }]
                }); //Highcharts.Chart ends
            }); //function ends
        }

        custom();​

Answer 1

我想你想要这个:

 data:  [{
            y: 50,
            color: 'red'},
        {
            y: 30,
            color: 'blue'},
        {
            y: 20,
            color: 'pink'},
        {
            y: 10,
            color: 'orange'}]

Jsfiddle