我在 angular2 中使用 ng2-charts 构建了一个水平条形图,但我不确定为什么我没有看到图形数据,也没有在我的控制台中看到任何错误。
HTML:
<canvas baseChart [data]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
</canvas>
组件:
result: Iresult[] = [];
barChartLabels: string[] =[];
barChartType: string = 'horizontalBar';
barChartLegend: boolean = true;
barChartData: any[] = [];
barChartOptions: any = {
scaleShowVerticalLines: false,
responsive: true
};
barChartLabels: string[] =[];
barChartType: string = 'horizontalBar';
barChartLegend: boolean = true;
barChartData: any[] = [];
getData(){
this.dataService.getData().subscribe(
data => {
this.result = data;
this.barChartLabels = this.result.map(item => item.label);
console.log(this.barChartLabels); // RESULT: ["test 1", "test 2"]
this.barChartData = this.result.map(item => item.data);
console.log(this.barChartData); // RESULT: [25, 55]
},
error => this.errorMessage = <any>error);
console.log(this.barChartLabels); // RESULT: []
console.log(this.barChartData); // RESULT: []
}
JSON 文件:
[
{
"id": 5,
"label": "test 1",
"data": 25
},
{
"id": 6,
"label": "test 2",
"data": 55
}
]
服务文件:
getData(): Observable<IChartData[]>{
return this._http.get('https://api.myjson.com/bins/ywavt')
.map((res:Response) => <IChartData[]> res.json())
.do(data => console.log('All: ' + JSON.stringify(data))) //DEBUG USE
.catch(this.handleError);
}
private handleError(error: Response) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
//Console do result: All: [{"id":5,"label":"test 1","data":25},{"id":6,"label":"test 2","data":55}]
接口(interface)类
export interface IChartData {
id: number;
label: string;
data: any;
}
更新
这是我目前拥有的一个 Plunker:https://plnkr.co/edit/0GyFTkuqF7m8JhUKK6Kl?p=preview
标签未显示,但彩色水平条未正确定位。
最佳答案
更新 2
由于在subscribe
中初始化图表数据异步时问题仍然存在,一个可行的解决方案是使用 loading flag 结合 *ngIf
来在初始化图表之前等待服务中的数据加载。
看起来像这样:
模板:
<canvas *ngIf="loaded" baseChart [data]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
组件:
loaded = false;
getData(){
this.dataService.getData().subscribe(data => {
this.resultData = data;
this.barChartLabels = this.resultData.map(item => item.label);
this.barChartData = this.resultData.map(item => item.data);
this.loaded = true;
}
}
这是一个PLUNKER
更新 1
根据您的评论,这有助于显示数据,但标签仍未显示。从您提供的代码中,很难知道为什么,但这可能是您的数据有问题。您可以记录barChartData
和 barCharLabels
以便我查看吗?
这是您的示例的工作插件,但具有硬编码数据:PLUNKER
原创
ng2-chart 在内部使用 ngOnChanges
来捕获其输入数据的变化。这意味着修改您输入的数组不会触发更改。由于您的 barChartLabels
和 barChartData
数组已经初始化为空数组,这就是图表将使用的内容。
要触发 ngOnChanges
,您需要做的是在收到新数据时更改 barChartLabels
和 barChartData
的实际实例。
在您的 getData
方法中替换它:
this.result.forEach( item => {
this.barChartLabels.push(item.label);
this.barChartData.push(item.dataInfo);
})
像这样:
this.barChartLabels = this.result.map(item => item.label);
this.barChartDatat = this.result.map(item => item.dataInfo);
关于angular - ng2-charts 条形图不显示数据/图形标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43675315/