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>

更改图表标签

1 个答案: