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

Highcharts更改栏背景颜色基于类别值

1 个答案: