如何为Highcharts下钻饼图的各子类别设置自定义颜色？

问题出在你之前用二维数组格式定义下钻数据，这种格式无法直接添加color属性，必须改用对象结构来定义每个数据点的属性，这样就能避免"unexpected token"语法错误，同时给不同告警级别设置指定颜色。

以下是修改后的完整代码，核心改动是把下钻series里的data从二维数组替换为包含color属性的对象数组：

Highcharts.chart('container_alerts_environment', {
    chart: {
        type: 'pie'
    },
    title: {
        text: 'Alerts Grouped By Environment',
        align: 'center'
    },
    subtitle: {
        text: 'Click the slices to view alerts. Source: <a href="http://vi-operations.bbtnet.com/Data/Active Nutanix Alarms.html" target="_blank">Alerts Data</a>',
        align: 'center'
    },

    accessibility: {
        announceNewData: {
            enabled: true
        },
        point: {
            valueSuffix: ''
        }
    },

    plotOptions: {
        series: {
            borderRadius: 5,
            dataLabels: [{
                enabled: true,
                distance: 15,
                format: '{point.name}'
            }, {
                enabled: true,
                distance: '-30%',
                filter: {
                    property: 'percentage',
                    operator: '>',
                    value: 0
                },
                format: '{point.y}',
                style: {
                    fontSize: '0.9em',
                    textOutline: 'none'
                }
            }]
        }
    },

    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },

    series: [
        {
            name: 'Alert Count',
            colorByPoint: true,
            data: [
                {
                    name: 'DEV',
                    y: 19,
                    drilldown: 'DEV'
                },
                {
                    name: 'NPRD',
                    y: 8,
                    drilldown: 'NPRD'
                },
                {
                    name: 'DR',
                    y: 11,
                    drilldown: 'DR'
                },
                {
                    name: 'PROD',
                    y: 23,
                    drilldown: 'PROD'
                }
            ]
        }
    ],
    drilldown: {
        series: [
            {
                name: 'DEV',
                id: 'DEV',
                data: [
                    { name: 'Critical', y: 10, color: '#ff0000' },
                    { name: 'Warning', y: 7, color: '#ff9900' },
                    { name: 'Info', y: 2, color: '#ffff00' }
                ]
            },
            {
                name: 'NPRD',
                id: 'NPRD',
                data: [
                    { name: 'Critical', y: 3, color: '#ff0000' },
                    { name: 'Warning', y: 4, color: '#ff9900' },
                    { name: 'Info', y: 1, color: '#ffff00' }
                ]
            },
            {
                name: 'DR',
                id: 'DR',
                data: [
                    { name: 'Critical', y: 1, color: '#ff0000' },
                    { name: 'Warning', y: 4, color: '#ff9900' },
                    { name: 'Info', y: 6, color: '#ffff00' }
                ]
            },
            {
                name: 'PROD',
                id: 'PROD',
                data: [
                    { name: 'Critical', y: 12, color: '#ff0000' },
                    { name: 'Warning', y: 8, color: '#ff9900' },
                    { name: 'Info', y: 3, color: '#ffff00' }
                ]
            }
        ]
    }
});

关键说明 #

• 每个下钻数据点改用对象结构，明确指定name、y（数值）和color（颜色值，支持十六进制、RGB等格式）
• 父饼图保持原有逻辑不变，colorByPoint: true让父饼图自动分配不同颜色
• 这样修改后既符合JavaScript语法规范，又能实现Critical（红色）、Warning（橙色）、Info（黄色）的颜色要求

内容的提问来源于stack exchange，提问作者Anthony Furr