为Highcharts三级钻取图表的第二、三级新增图例值并显示三级带色图例

针对你的需求，我帮你调整了图表配置，主要通过钻取事件处理和系列配置优化来实现第二、三级钻取的图例值显示，以及第三级带颜色的图例展示：

修改后的完整配置代码 #

Highcharts.chart('container', {
    chart: {
        type: 'column',
        // 监听钻取/返回事件，动态处理图例
        events: {
            drilldown: function(e) {
                const chart = this;
                // 隐藏上一级需要钻取的系列图例
                chart.series.forEach(series => {
                    if (series.options.drilldown) {
                        series.update({ showInLegend: false });
                    }
                });
                // 处理当前钻取级别的系列：追加数值到名称、显示图例、绑定颜色
                e.seriesOptions.forEach((series, index) => {
                    // 计算系列总数值并追加到名称
                    const totalValue = series.data.reduce((sum, item) => sum + item.y, 0);
                    series.name = `${series.name}: ${totalValue}`;
                    series.showInLegend = true;
                    // 第三级钻取时绑定对应颜色
                    if (e.drilldownLevel === 2) {
                        series.color = Highcharts.getOptions().colors[index];
                    }
                });
            },
            drillup: function() {
                const chart = this;
                // 返回上一级时恢复系列的原始名称和图例显示
                chart.series.forEach(series => {
                    if (series.options.drilldown) {
                        const originalName = series.name.split(':')[0];
                        series.update({
                            name: originalName,
                            showInLegend: true
                        });
                    }
                });
            }
        }
    },
    title: {
        text: 'Stacked bar chart'
    },
    xAxis: {
        labels: {
            rotation: -45,
            align: "right",
            y: 30,
        },
        type: "category",
        tickWidth: 0
    },
    yAxis: {
        title: {
            text: 'Total fruit consumption'
        }
    },
    legend: {
        enabled: true,
        itemStyle: { fontSize:'10px' },
        align: 'right',
        verticalAlign: 'middle',
        layout: 'vertical',
        reversed:true
    },
    plotOptions: {
        series: {
            stacking: 'normal',
            // 确保点击柱子或图例项都能触发钻取
            point: {
                events: {
                    click: function() {
                        if (this.drilldown) {
                            this.series.chart.drilldown(this);
                        }
                    }
                }
            }
        }
    },
    // 示例钻取数据结构（根据你的实际数据调整）
    drilldown: {
        series: [
            // 第二级钻取数据
            {
                id: 'level1-item1',
                name: 'Level 2 Item 1',
                data: [['SubItem1', 10], ['SubItem2', 20]]
            },
            // 第三级钻取数据
            {
                id: 'level2-subitem1',
                name: 'Level 3 SubItem1',
                data: [['Detail1', 5], ['Detail2', 5]]
            }
        ]
    },
    // 第一级系列数据（根据你的实际数据调整）
    series: [
        {
            name: 'Level 1 Item 1',
            data: [{name: 'Item1', y: 30, drilldown: 'level1-item1'}],
            showInLegend: true
        }
    ]
});

关键修改点说明 #

• 钻取事件动态控制图例：
  • 钻取时隐藏上一级的钻取系列图例，为当前级系列名称追加总数值，并开启图例显示
  • 返回上一级时恢复系列的原始名称和图例状态
• 第三级颜色绑定：通过判断钻取级别为第三级时，为每个系列分配Highcharts默认颜色，保证图例颜色与柱子颜色一一对应
• 图例交互优化：配置点击事件，确保点击柱子或图例项都能正常触发钻取逻辑

这样修改后，第二、三级钻取时图例会显示带对应数值的项，第三级的图例也会和柱子颜色完全匹配啦。

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