如何翻译Highcharts的Drilldown系列名称？仅针对二级及以上层级

核心思路 #

通过监听Highcharts的drilldown和drillup事件跟踪当前钻取层级，仅在层级≥2时动态修改下钻系列的名称，避免影响一级系列。

实现步骤 #

1. 添加层级跟踪变量
   在组件类中定义变量记录当前钻取层级，初始值为1（对应一级系列）。

2. 配置钻取事件监听
   在Highcharts配置的chart.events中添加drilldown和drillup事件处理逻辑：

• drilldown事件：层级+1，判断层级≥2时，找到对应下钻系列并修改其名称
• drillup事件：层级-1，恢复层级计数

3. 实现翻译逻辑
   编写翻译函数，根据系列名称映射为目标语言。

代码示例 #

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

drilldown(Highcharts);

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  Highcharts: typeof Highcharts = Highcharts;
  currentDrillLevel = 1; // 初始为一级系列

  chartOptions: Highcharts.Options = {
    chart: {
      type: 'column',
      events: {
        // 处理钻取事件
        drilldown: (e: any) => {
          this.currentDrillLevel++;
          if (this.currentDrillLevel >= 2) {
            // 根据point的drilldown属性找到对应下钻系列
            const targetSeries = (this.chartOptions.drilldown as any).series.find(
              (s: any) => s.id === e.point.drilldown
            );
            if (targetSeries) {
              // 调用翻译函数修改名称
              targetSeries.name = this.translateSeriesName(targetSeries.name);
            }
          }
        },
        // 处理钻取返回事件
        drillup: () => {
          this.currentDrillLevel--;
        }
      }
    },
    title: {
      text: 'Drilldown Example'
    },
    xAxis: {
      type: 'category'
    },
    series: [
      {
        name: '一级系列',
        data: [
          { name: '分类A', y: 5, drilldown: 'cat-a' },
          { name: '分类B', y: 3, drilldown: 'cat-b' }
        ]
      }
    ],
    drilldown: {
      series: [
        {
          id: 'cat-a',
          name: 'Category A', // 待翻译的二级系列名称
          data: [['A1', 2], ['A2', 3]]
        },
        {
          id: 'cat-b',
          name: 'Category B', // 待翻译的二级系列名称
          data: [['B1', 1], ['B2', 2]]
        }
      ]
    }
  };

  // 翻译函数，根据实际需求调整映射规则
  translateSeriesName(originalName: string): string {
    const translationMap: { [key: string]: string } = {
      'Category A': '分类A',
      'Category B': '分类B'
      // 可添加更多二级/三级系列的翻译映射
    };
    return translationMap[originalName] || originalName;
  }
}

关键说明 #

• 使用箭头函数绑定this上下文，确保在事件处理中能访问组件类的变量和方法
• 仅在currentDrillLevel ≥ 2时修改系列名称，避免影响一级系列
• 确保钻取系列的id与数据点的drilldown属性一一对应，才能正确匹配到目标系列

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