大佬教程收集整理的这篇文章主要介绍了angular – 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}]
接口类
export interface IChartData {
id: number;
label: string;
data: any;
}
UPDATE
这是我到目前为止的一个Plunker：https://plnkr.co/edit/0GyFTkuqF7m8JhUKK6Kl?p=preview
这看起来像这样：
模板：
<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;
}
}
更新1
根据您的评论,这有助于显示数据,但标签仍未显示.从您提供的代码中,很难知道原因,但您的数据可能有问题.你能记录barChartData和barCharLabels所以我可以看一下吗？
这是一个适用于您的示例的工作plunker,但具有硬编码数据：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条形图不显示数据/图形标签全部内容，希望文章能够帮你解决angular – ng2-charts条形图不显示数据/图形标签所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。