我有一个 Angular 8 应用程序,使用的是 Primeng-lts 8.2.5 组件,我正在尝试在我的应用程序中使用 Chart.js 版本 2.9.3,但饼图不会显示出来,除非我放大它,同时也会出现标签问题。
在我的饼图中,我按状态显示计数,如下面的代码所示,我从 HTTP 调用中加载 status[]
,然后对于每个 status
,我调用了一个返回计数的 HTTP 方法:
HTML:
<p-chart type="pie" [data]="numberByStatus" >
</p-chart>
抱歉,我只能用英语进行交流和翻译。
numberByStatus : any;
labelsByStatus: String[] = [];
countsByStatus: number[] = [];
this.service.getStatus()
.subscribe((res: status[]) => {
res.forEach(element => {
this.service.getCountByStatus(element.id)
.subscribe((count: number) => {
this.countsByStatus.push(count);
this.labelsByStatus.push(element.designation)
}, (err) => {
alert('Faild to load counts');
});
});
}, (err) => {
alert('Faild to load data');
});
this.numberByStatus = {
labels: this.labelsByStatus,
datasets: [
{
data: this.countsByStatus,
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
this.numberByStatus = something
上工作。 - Ashot Aleqsanyan