Изменение метки графика

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>