【发布时间】：2017-07-25 15:22:42
【问题描述】：
这些天我开始使用 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 组件在开始时获取变量并随后更新它们。所以当标签为空时，即使我添加了一些标签，它们也会被添加为未定义的。所以我有一个带有正确值但没有正确标签的图表。一切都标记为未定义。
如果我在开始时启动标签，我将有一个具有正确值的良好彩色图表
所以我的问题是：
如何加载数据，然后渲染 HTML 组件？
有没有办法在没有数据的情况下渲染 chart.js 组件并用正确的标签和数据更新它？
需要任何帮助，谢谢。
【问题讨论】：
标签： javascript angular charts chart.js ng2-charts