更改图表的标签

Question

是否可以更改 html 中图表的标签。

我实现了圆环图。标签定义为

public chartLabels = ["korea", "tokyo", "sydney"]

我知道我可以在这里更改标签名称。

但我必须以标签根据语言选择进行翻译的方式命名它。我在 html 像

那样做

{{'KOREA'|translate}}

那么我该如何根据翻译需要更改标签

html 中的标签是这样定义的

 <canvas baseChart
      [labels]="chartLabels"     
      chartType="pie">
 </canvas>

Answer 1

你可能会使用这样的东西：

import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Component({
    selector: 'app',
    template: `
       <canvas baseChart
          [labels]="chartLabels"     
          chartType="pie">
      </canvas>
    `
})
export class AppComponent {
    constructor(private translate: TranslateService) {};

    chartLabels = ["korea", "tokyo", "sydney"]
    translatedChartLabels = []

    ngOnInit() {
        this.translate.get(this.chartLabels)
            .subscribe(translations => {
                /* translations is now an object with { 
                 "key1": "translated value", 
                 "key1": "translated value" } 
                 and needs to be converted to an array again. */
                this.translatedChartLabels = Object.values(translations)
        });
    }
}

 <canvas baseChart
      [labels]="translatedChartLabels"     
      chartType="pie">
 </canvas>

更改图表的标签

Changing the label of chart

html

javascript

chart.js

ngx-translate

angular