首页 > 解决方案 > Highcharts 为一对中的每个数据点定义颜色

问题描述

我想定义两种自定义颜色,一种用于男性,另一种用于女性。

我有一个简单的柱形图,按年龄绘制男性和女性的图表。有 7 对数据点。表示 0-39 岁的男性和女性使用一对数据点,40-49 岁的男性和女性使用另一对数据点,依此类推。默认图表颜色为浅蓝色和黑色。

我想改变这些颜色,比如说绿色和橙色。colorByPoint 不能满足我的需要,因为它为每个数据对着色不同的颜色。解决办法是什么?

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Average Life Expectancy'
        },
        xAxis: {

            categories: ['0-39', '40-49', '50-59', '60-69', '70-79', '80-89', '90+'],
            title: {
                text: null
            }
        },

        yAxis: {
            min: 0,
            title: {
                text: 'Breakdown by gender',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        plotOptions: {
            column: {
              colorByPoint: true,

                dataLabels: {
                    enabled: true
                }

            }


        },

        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 80,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        credits: {
            enabled: false
        },

        series: [{
            name: 'Males',
            data: [10, 7, 4, 12, 27, 21, 2],


        }, {
            name: 'Females',
            data: [10, 3, 5, 12, 15, 10, 11]
        }]

    });

标签: highcharts

解决方案


这对我有用

series: [{
        name: 'Males',
        data: [10, 7, 4, 12, 27, 21, 2],
        color: '#008000'

    }, {
        name: 'Females',
        data: [10, 3, 5, 12, 15, 10, 11],
        color: "#FFA500"
    }]

推荐阅读