Angular13中Highcharts无数据提示语国际化切换失效问题

核心问题 #

Highcharts.setOptions()仅对后续创建的图表生效，已初始化完成的图表不会自动读取新的全局配置，直接调用redraw()也无法触发无数据文本的更新。

解决方案 #

1. 保存图表实例 #

在组件中存储初始化后的Highcharts图表实例，方便后续直接操作：

// 组件类内定义变量
private chartInstance: Highcharts.Chart;

// 初始化图表时保存实例
initChart() {
  this.chartInstance = Highcharts.chart('chart-container', {
    // 你的基础图表配置
    noData: {
      style: {
        fontWeight: 'bold',
        fontSize: '12px',
        color: '#666'
      }
    }
  });
}

2. 语言切换时直接更新实例配置 #

在语言变更订阅中，同时更新全局配置和已存在的图表实例：

this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
  // 更新全局配置，供后续创建的图表使用
  Highcharts.setOptions({
    lang: {
      noData: this.translate.instant('no.data.found')
    }
  });

  // 直接修改已存在的图表实例
  if (this.chartInstance) {
    // 更新配置中的文本
    this.chartInstance.options.lang.noData = this.translate.instant('no.data.found');
    // 直接修改页面上的无数据标签文本
    if (this.chartInstance.noDataLabel) {
      this.chartInstance.noDataLabel.attr({
        text: this.translate.instant('no.data.found')
      });
    }
    // 重新渲染图表
    this.chartInstance.redraw();
  }
});

3. 确认翻译键映射正确 #

确保i18n配置文件中对应语言的翻译值正确：

// de.json
{
  "no.data.found": "Es wurden keine Daten gefunden"
}

// en.json
{
  "no.data.found": "No data found"
}

补充：使用angular-highcharts封装库的情况 #

如果用的是官方封装的angular-highcharts，可通过组件实例获取图表对象：

// 模板中定义组件引用
// <highcharts-chart [options]="chartOptions" #chartRef></highcharts-chart>

@ViewChild('chartRef') chartComponent: HighchartsChartComponent;

// 语言切换时更新
this.chartComponent.chart.options.lang.noData = this.translate.instant('no.data.found');
this.chartComponent.chart.noDataLabel.attr({ text: this.translate.instant('no.data.found') });
this.chartComponent.chart.redraw();

内容的提问来源于stack exchange，提问作者Burçin Ezgi Erdal