Angular中Highcharts如何将分类名称设为图例而非系列？

针对你遇到的addSeriesAsDrilldown仅支持单个下钻系列、多分类单系列无法显示图例的问题，可以通过自定义下钻逻辑来实现，手动控制多系列的添加与图例展示，具体实现如下：

核心思路 #

放弃依赖官方的addSeriesAsDrilldown方法，转而通过监听柱状图数据点的点击事件，手动添加多个下钻系列，同时维护钻取层级状态，确保图例正常显示。

代码实现示例 #

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import drilldown from 'highcharts/modules/drilldown';

// 引入钻取模块
drilldown(Highcharts);

@Component({
  selector: 'app-multi-drilldown-chart',
  templateUrl: './multi-drilldown-chart.component.html',
  styleUrls: ['./multi-drilldown-chart.component.css']
})
export class MultiDrilldownChartComponent implements OnInit {
  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    chart: {
      type: 'column',
      events: {
        // 钻取返回时恢复上一级状态
        drillup: function(this: Highcharts.Chart) {
          const lastLevel = this.drilldownLevels.pop();
          if (lastLevel) {
            // 移除当前钻取系列
            lastLevel.series.forEach(s => s.remove(false));
            // 恢复主系列可见性与x轴分类
            lastLevel.prevSeries.forEach(s => s.setVisible(true, false));
            this.xAxis[0].setCategories(lastLevel.prevXAxisCategories, false);
            this.redraw();
          }
        }
      }
    },
    title: { text: '多级下钻柱状图' },
    xAxis: { type: 'category' },
    legend: { enabled: true }, // 确保图例开启
    plotOptions: {
      column: {
        point: {
          events: {
            // 自定义点击事件处理钻取
            click: function(this: Highcharts.Point) {
              const chart = this.series.chart;
              const drilldownSeriesList = this.drilldown as Highcharts.SeriesOptionsType[];

              if (drilldownSeriesList) {
                // 清空现有钻取层级记录
                chart.drilldownLevels.forEach(level => {
                  level.series.forEach(s => s.remove(false));
                });
                chart.drilldownLevels = [];

                // 批量添加下钻系列
                drilldownSeriesList.forEach(series => {
                  chart.addSeries(series, false);
                });

                // 更新x轴分类（取第一个系列的分类）
                const xCategories = (drilldownSeriesList[0] as Highcharts.SeriesColumnOptions)?.data?.map(item => 
                  typeof item === 'object' ? item.name : item[0]
                ) || [];
                chart.xAxis[0].setCategories(xCategories, false);

                // 记录当前钻取层级，用于返回恢复
                chart.drilldownLevels.push({
                  series: drilldownSeriesList.map(s => chart.get(s.id as string)),
                  prevXAxisCategories: chart.xAxis[0].userOptions.categories,
                  prevSeries: chart.series.filter(s => !drilldownSeriesList.some(dds => dds.id === s.id))
                });

                // 隐藏主系列，显示下钻系列
                chart.series.forEach(s => {
                  s.setVisible(drilldownSeriesList.some(dds => dds.id === s.id), false);
                });

                // 统一重绘图表
                chart.redraw();
              }
            }
          }
        }
      }
    },
    series: [{
      name: '主分类',
      data: [
        {
          name: '分类A',
          y: 120,
          // 自定义下钻数据：多个系列
          drilldown: [
            {
              id: 'subA-1',
              name: '子分类A1',
              data: [['项1', 40], ['项2', 50], ['项3', 30]]
            },
            {
              id: 'subA-2',
              name: '子分类A2',
              data: [['项1', 25], ['项2', 35], ['项3', 60]]
            }
          ]
        },
        {
          name: '分类B',
          y: 180,
          drilldown: [
            {
              id: 'subB-1',
              name: '子分类B1',
              data: [['项1', 70], ['项2', 60], ['项3', 50]]
            },
            {
              id: 'subB-2',
              name: '子分类B2',
              data: [['项1', 30], ['项2', 45], ['项3', 105]]
            }
          ]
        }
      ]
    }]
  };

  ngOnInit(): void {}
}

关键说明 #

1. 自定义钻取逻辑：通过point.click事件触发钻取，手动添加多个下钻系列，每个系列对应一个图例条目，自然解决图例显示问题。
2. 层级状态维护：通过chart.drilldownLevels数组记录每一层钻取的系列、x轴分类和主系列状态，确保点击返回按钮时能正确恢复上一级视图。
3. 性能优化：添加系列和更新x轴时暂不重绘，最后统一调用redraw()，减少图表重绘次数。
4. 图例控制：开启legend.enabled，每个下钻系列作为独立系列存在，图例自动展示所有系列的名称与颜色，支持点击图例切换系列显示状态。

内容的提问来源于stack exchange，提问作者Nikhil B R