[英]Angular with ng2charts for bar chart shows NAN% when no data present
我使用带有ng2图表(chartjs)的角度来实现条形图,但问题是当条形图没有数据时它会在YAxes上显示NAN%。 请参阅下面的图表图片 这是我的代码
public barChartData: ChartDataSets[] = [{ label: 'Playbooks', data: this.playbookList }];
public barChartLabels: Label[] = this.dayslist;
public barChartOptions: (ChartOptions & { annotation: any }) ={
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Days'
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
callback: function(value) {if (value % 1 === 0) {return value;}}
},
scaleLabel: {
display: true,
labelString: 'Playbooks'
}
}]
},
};
public barChartColors: Color[] = [
{
borderColor: 'silver',
backgroundColor: '#55a3d1',
Color:'#fff'
},
];
下面的模板代码
<div *ngIf='data1.length != 0'>
<canvas baseChart height="80" [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions"
[colors]="barChartColors" [legend]="barChartLegend" [chartType]="barChartType">
</canvas>
</div>
任何人都可以帮我解决这个问题。
getplaybooksCountApi(id) {
this.handler.activateLoader();
this.testSuiteService.getPlaybooksCounts(id).subscribe(results => {
if (this.handler.handle(results)) {
return;
}
this.playbooksData = results['data'];
console.log(this.playbooksData)
if (this.playbooksData && this.playbooksData.length > 0) {
for (var i = 0; i < this.playbooksData.length; i++) {
if (this.playbooksData[i].day)
this.dayslist.push(this.playbooksData[i].day);
if (this.playbooksData[i].playbookCount && this.playbooksData[i].playbookCount!=0)
this.playbookList.push(this.playbooksData[i].playbookCount);
if (this.playbooksData[i].playbookCount==0)
{
this.playbooksData[i].playbookCount = 0;
this.playbookList.push(this.playbooksData[i].playbookCount);
}
}
}
}, error => {
this.handler.hideLoader();
this.handler.error(error);
});
}
为playbook列表放置一个for循环,检查数据是否存在,如果不存在,则将其替换为零。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.