Angular2 用标签更新 ng2-charts

2022-01-22 00:00:00 charts javascript chart.js angular ng2-charts

这些天我开始使用 Angular2，并且对框架 ng2-charts 有疑问.

I am starting to work these days with Angular2, and have a question with the framework ng2-charts.

这是我的 component.ts 代码:

import { Component } from '@angular/core';
import { ChartsModule } from 'ng2-charts';
import { PredictionService } from './prediction.service'

@Component({
  selector: 'prediction-result-chart',
  templateUrl: './predictionResultChart.component.html'
})

export class PredictionResultChartComponent{

  public pieChartLabels:string[] = [];
  public pieChartData:number[] = [];
  public pieChartType:string = 'pie';
  public JSONobject = {}

  constructor(private predictionService: PredictionService){
    this.getPredictions();
  }

  public getPredictions() {
    this.predictionService.getPredictions('hello').do(result => this.populateChart(result)).subscribe();
  }

  public populateChart(obj): void{
    let labels:string[] = [];
    let data:number[] = [];
    for (var i = 0; i < obj.predictions.length; i++)
    {
      labels.push(String(obj.predictions[i].class));
      data.push(obj.predictions[i].percentage);
    };
    this.pieChartData = data;
    this.pieChartLabels = labels;
  }

  public chartClicked(e:any):void {}
  public chartHovered(e:any):void {}

}

component.html 代码:

<div style="display: block">
  <canvas baseChart
      [data]="pieChartData"
      [labels]="pieChartLabels"
      [chartType]="pieChartType"
      (chartHover)="chartHovered($event)"
      (chartClick)="chartClicked($event)"></canvas>
</div>

服务代码:

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';

import { Observable }     from 'rxjs/Observable';
import 'rxjs/add/operator/map';


@Injectable()
export class PredictionService {

  private baseUrl: string = 'http://localhost:8080/predict/';
  constructor(private http : Http){
  }

  getPredictions(text :string) {
    return this.http.get(this.baseUrl + text).map(res => res.json());
  }

}

使用上面的代码，这是我所拥有的，没有任何颜色的图表:

With the codes above, here is what I have, a chart without any colors :

事实上，当我深入研究我的代码时，HTML 组件在开始时获取变量并随后更新它们.所以当标签为空时，即使我添加了一些标签，它们也会被添加为未定义的.所以我有一个带有正确值但没有正确标签的图表.一切都标记为未定义.

In fact when I looked deeply into my code, the HTML component took the variables at the beginning and update them then. So when the labels are empty, even if I add some labels, they will be added as undefined. So I have a chart with the right values but not the right labels. Everything marked as undefined.

如果我在开始时启动标签，我将有一个具有正确值的彩色图表

And if I initiate the labels at the beginning, I will have a good coloured chart with the right values

所以我的问题是:

如何加载数据，然后渲染 HTML 组件?

How to load the data, then render the HTML component ?

是否可以在没有数据的情况下渲染 chart.js 组件并使用正确的标签和数据对其进行更新?

Is there anyway to render the chart.js component with no data and update it with right labels and data ?

需要任何帮助，谢谢.

推荐答案

在标准的chart.js中，您可以使用.update()原型方法在修改图表后重新渲染图表数据(包括标签).

In standard chart.js you can use the .update() prototype method to re-render a chart after you have modified its data (including labels).

但是，ng2-charts 似乎没有提供触发更新的机制(根据 这个 github 问题).我在 Angular2 方面的经验并不丰富，但也许这对你有用?该方法取自 zbagley 在 17 天前发布的 github 问题中发表的评论(不幸的是，我找不到生成引用此特定评论的 url 的方法).

However, it appears that ng2-charts doesn't provide a mechanism to trigger the update (as per this github issue). I'm not very experienced in Angular2 at all, but perhaps this will work for you? The approach was taken from a comment made by zbagley in the github issue posted 17 days ago (unfortunately I could not find a way to generate a url referencing this specific comment).

方法是在数据可用之前基本上不渲染图表.以下是对 component.ts 代码的更改.

The approach is to basically not render your chart until the data is available. Here is the change to your component.ts code.

import { Component } from '@angular/core';
import { ChartsModule } from 'ng2-charts';
import { PredictionService } from './prediction.service'

@Component({
  selector: 'prediction-result-chart',
  templateUrl: './predictionResultChart.component.html'
})

export class PredictionResultChartComponent {    
  public pieChartLabels:string[] = [];
  public pieChartData:number[] = [];
  public pieChartType:string = 'pie';
  public JSONobject = {};
  public isDataAvailable:boolean = false;

  constructor(private predictionService: PredictionService){
    this.getPredictions();
  }

  public getPredictions() {
    this.predictionService.getPredictions('hello').do(result => this.populateChart(result)).subscribe();
  }

  public populateChart(obj): void {        
    let labels:string[] = [];
    let data:number[] = [];
    for (var i = 0; i < obj.predictions.length; i++)
    {
      labels.push(String(obj.predictions[i].class));
      data.push(obj.predictions[i].percentage);
    };
    this.pieChartData = data;
    this.pieChartLabels = labels;
    this.isDataAvailable = true;
  }

  public chartClicked(e:any):void {}
  public chartHovered(e:any):void {}    
}

然后您将在 component.html 代码中使用 ngIf.

And then you would use ngIf in your component.html code.

<div style="display: block" *ngIf="isDataAvailable">
  <canvas baseChart
      [data]="pieChartData"
      [labels]="pieChartLabels"
      [chartType]="pieChartType"
      (chartHover)="chartHovered($event)"
      (chartClick)="chartClicked($event)"></canvas>
</div>

相关文章