Highcharts柱状钻取系列：为每个柱子自定义颜色的问题

你遇到的问题核心在于钻取后的子系列不会自动继承主系列的zones颜色配置，所以当前所有钻取柱子都默认沿用了第一个zone的黄色。要实现每个柱子按预设颜色显示，你需要给钻取系列单独配置颜色规则，这里有两种简单可行的方案：

方案一：直接给每个数据点指定颜色 #

在定义钻取系列的data时，给每个数据项添加对应的颜色值（第三个参数），这样每个柱子会直接使用你指定的颜色：

drilldown: {
    series: [{
        name: 'Microsoft',
        id: 'Microsoft',
        data: [
            ['Surface', 20, '#ffd700'], // 黄色
            ['Xbox', 20, '#ffc107'],    // 芥末黄
            ['Office', 30, '#ff9800'],  // 橙色
            ['Other', 30, '#ffd700']    // 黄色
        ]
    }]
}

方案二：给钻取系列配置zones规则 #

如果希望和主系列一样基于数据值自动匹配颜色，可以在钻取系列里复制主系列的zones配置，让Highcharts根据数值自动分配颜色：

drilldown: {
    series: [{
        name: 'Microsoft',
        id: 'Microsoft',
        data: [['Surface', 20], ['Xbox', 20], ['Office', 30], ['Other', 30]],
        zones: [{
            value: 21,
            color: '#ffd700'
        }, {
            value: 29,
            color: '#ffc107'
        }, {
            color: '#ff9800'
        }]
    }]
}

进阶：复用颜色规则（多钻取系列场景） #

如果有多个钻取系列，为了保持颜色规则一致，可以把zones配置封装成一个函数，在主系列和所有钻取系列里复用：

// 封装颜色规则函数
function getCustomZones() {
    return [{
        value: 21,
        color: '#ffd700'
    }, {
        value: 29,
        color: '#ffc107'
    }, {
        color: '#ff9800'
    }];
}

// 主系列使用
series: [{
    name: 'Brands',
    data: [
        { name: 'Microsoft', y: 100, drilldown: 'Microsoft' }
    ],
    zones: getCustomZones()
}]

// 钻取系列使用
drilldown: {
    series: [{
        name: 'Microsoft',
        id: 'Microsoft',
        data: [['Surface', 20], ['Xbox', 20], ['Office', 30], ['Other', 30]],
        zones: getCustomZones()
    }]
}

这样修改后，点击Microsoft的柱子，钻取后的每个柱子就会按照你预设的颜色依次显示了。

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