最近我开始使用 Angular2 工作，并且对框架 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());
  }

}

有了上面的代码，这就是我所拥有的，一张没有任何颜色的图表:

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

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

所以我的问题是:

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

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

需要任何帮助，谢谢。

最佳答案

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

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

该方法基本上是在数据可用之前不呈现图表。这是对您的 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 = {};
  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。

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

关于javascript - Angular2 使用标签更新 ng2-charts，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43204025/