更改图表的标签-前端问题

Changing the label of chart(更改图表的标签)

本文介绍了更改图表的标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

Is it possible to change the labels of the chart in html.

我已经实现了一个圆环图.标签定义为

I have implemented a doughnut chart. the labels are defined as

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

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

I understand I can change the label names here.

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

but I have to name it in such a way that the label translates depending on the language selection. I do it in html like

{{'KOREA'|translate}}

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

So how do I change labels for the translation needs

html中的标签是这样定义的

the labels in html are defined so

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

推荐答案

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

You could probably use something like this:

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>

这篇关于更改图表的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！