Highcharts lang with ngx-translate

Posted 2021-05-05

我目前正在为我的项目使用Angular 4，并且正在使用ngx-translate（i18n）来使用户能够切换语言。这些设置在i18n文件夹中，其中包含不同语言的json文件。我也在使用高图表的许多图表，我发现当我检查他们的API他们也使用i18n语言。但是，从我在API文档中收集到的是我需要在HighCharts上使用setOptions并在那里指定翻译单词，但是，我想知道是否可以使用我目前用于ngx-translate的json文件来完成？或者，如果用户能够在语言之间切换，我应该如何使用setOptions？

答案

该演示展示了如何动态执行setOptions：http://jsfiddle.net/kkulig/1qLqhtmd/

var chart = Highcharts.chart('container', {

  series: [{
    data: [5.5656565, 20]
  }]
});


setTimeout(function (){
  Highcharts.setOptions({
    lang: {
      decimalPoint: ' and after the dot is '
    }
  });
  chart.redraw();
}, 3000);

请注意，chart.redraw()在这里是必要的。如果我们将它注释掉，小数点将仅在3s后的工具提示中有所不同（轴标签不会改变）。

我认为这里最简单的方法是创建函数，将从文件中获取的JSON格式化为setOptions可接受的结构（因为它的参数也是JSON），并使用setOptions，如上例所示。