Question

请您查看This Demo并告诉我如何为图表中的每个列设置不同的颜色？

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'World\'s largest cities per 2014'
            },
            subtitle: {
                text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
            },
            xAxis: {
                type: 'category',
                labels: {

                    align: 'center',
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Population (millions)'
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>',
            },
            series: [{
                name: 'Population',
                data: [
                    ['Shanghai', 23.7],
                    ['Lagos', 16,1],
                    ['Instanbul', 14.2],

                ],
                dataLabels: {
                    enabled: true,
                    rotation: 0,
                    color: '#FFFFFF',
                    align: 'center',
                    x: 5,
                    y: 25,
                    style: {
                        fontSize: '14px',
                        fontFamily: 'Verdana, sans-serif',
                        textShadow: '0 0 3px black'
                    }
                }
            }]
        });
    });

感谢

Answer 1

你可以通过两种不同的方式做到这一点。首先，您可以明确地为每个点提供自己的颜色，这也涉及在data元素（name元素（y，data: [ {name: 'Shanghai', color: 'red', y: 23.7}, {name: 'Lagos', color: 'blue', y: 16.1}, {name: 'Instanbul', color: 'green', y:14.2} ]等）中明确地键入其他值：

bar

其次，您可以使用取决于Highcharts颜色数组的参数指定它。使用适用于column和... name: 'P2', colorByPoint: true, data: ...类型的colorByPoint系列属性（至少）：

{{1}}

直播demo。

如何在Highcharts中设置不同颜色列的样式

1 个答案: