求助：开发带Drilldown功能的Highcharts分组柱状图遇难题

没问题！其实分组柱状图的钻取逻辑和普通柱状图核心是相通的，只是在数据配置上要注意分组结构和钻取数据的对应关系。我给你准备了一个完整的可运行示例，你可以直接参考：

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: '分组柱状图钻取示例'
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: '数值'
        }
    },
    legend: {
        enabled: true
    },
    plotOptions: {
        column: {
            grouping: true, // 确保开启分组模式
            dataLabels: {
                enabled: true
            }
        }
    },
    series: [
        {
            name: '产品A',
            data: [
                {
                    name: '区域1',
                    y: 100,
                    drilldown: 'region1-productA' // 绑定对应钻取数据的ID
                },
                {
                    name: '区域2',
                    y: 150,
                    drilldown: 'region2-productA'
                },
                {
                    name: '区域3',
                    y: 80,
                    drilldown: 'region3-productA'
                }
            ]
        },
        {
            name: '产品B',
            data: [
                {
                    name: '区域1',
                    y: 120,
                    drilldown: 'region1-productB'
                },
                {
                    name: '区域2',
                    y: 90,
                    drilldown: 'region2-productB'
                },
                {
                    name: '区域3',
                    y: 110,
                    drilldown: 'region3-productB'
                }
            ]
        }
    ],
    drilldown: {
        series: [
            // 区域1-产品A的钻取数据（这里可以继续做子分组，也可以是单系列）
            {
                id: 'region1-productA',
                name: '产品A-区域1',
                data: [
                    ['1月', 30],
                    ['2月', 40],
                    ['3月', 30]
                ]
            },
            {
                id: 'region1-productB',
                name: '产品B-区域1',
                data: [
                    ['1月', 40],
                    ['2月', 35],
                    ['3月', 45]
                ]
            },
            // 区域2-产品A的钻取数据
            {
                id: 'region2-productA',
                name: '产品A-区域2',
                data: [
                    ['1月', 50],
                    ['2月', 60],
                    ['3月', 40]
                ]
            },
            {
                id: 'region2-productB',
                name: '产品B-区域2',
                data: [
                    ['1月', 30],
                    ['2月', 30],
                    ['3月', 30]
                ]
            },
            // 区域3-产品A的钻取数据
            {
                id: 'region3-productA',
                name: '产品A-区域3',
                data: [
                    ['1月', 25],
                    ['2月', 30],
                    ['3月', 25]
                ]
            },
            {
                id: 'region3-productB',
                name: '产品B-区域3',
                data: [
                    ['1月', 40],
                    ['2月', 35],
                    ['3月', 35]
                ]
            }
        ]
    }
});

关键配置说明： #

• 主数据绑定钻取ID：主图表的每个分组数据点，都要通过drilldown属性指定对应的钻取数据ID，确保点击时能找到对应的子数据。
• 钻取数据匹配ID：drilldown.series数组里的每个子系列，id必须和主数据点的drilldown值完全对应，否则无法触发钻取。
• 保持分组模式：确认plotOptions.column.grouping设置为true，这样主图表会保持分组柱状图的样式。
• 多级钻取扩展：如果需要实现多级钻取，只需要在子系列的数据点里继续添加drilldown属性，然后在drilldown.series里补充对应下一级的数据即可。

自定义钻取行为（可选） #

如果需要监听钻取/返回事件，做自定义逻辑，可以在chart.events里配置：

chart: {
    type: 'column',
    events: {
        drilldown: function(e) {
            // 钻取触发时执行，比如打印点击的点信息
            console.log('当前钻取到:', e.point.name);
        },
        drillup: function() {
            // 返回上一级时执行
            console.log('回到主图表');
        }
    }
}

这个示例直接运行就能看到效果，点击任意分组的柱子都会触发钻取，点击顶部的返回按钮就能回到上一级。

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