我最近一直在处理primeng图表,我正在使用PrimeNG提供的DoughnutChart。我想将存储在变量中的数值作为此图表的ts文件中的数据传递,但它不会在UI中显示任何内容,其中数据是静态的,它的工作方式非常正常。这是相同的代码:
1.)工作一: -
this.invoicedata = {
labels: ['InvoiceQty', 'TotalQty'],
datasets: [
{
data: [50, 50],
backgroundColor: [
"#ff9800",
"#ffffff",
],
hoverBackgroundColor: [
"#ff9800",
"#ffffff",
]
}]
}
2.)非工作人员: -
this.invoicedata = {
labels: ['InvoiceQty', 'TotalQty'],
datasets: [
{
data: [this.pICompletionPercentage, this.PIPendingpercent],
backgroundColor: [
"#ff9800",
"#ffffff",
],
hoverBackgroundColor: [
"#ff9800",
"#ffffff",
]
}]
}
这是相同的HTML: -
<div class="row">
<p-chart type="doughnut" [data]="invoicedata" width="150px"></p-chart>
<p class="text-center">Invoiced- {{pICompletionPercentage}}%</p>
</div>
答案 0 :(得分:1)
问题可能是您在服务通话结束前设置了invoiceData
。因为,您需要等待一段时间来填充invoiceData
,您可能还想延迟填充图表初始化。您可以使用*ngIf
实现此目的。
所以,你可以做这样的事情
Your.component.ts
@Component({
selector: 'your-comp',
template: `
<p-chart *ngIf="invoiceData" type="doughnut" [data]="invoiceData">
</p-chart>
`
})
export class YourComponent implements OnInit {
invoiceData;
constructor(private someService: SomeService) {}
ngOnInit() {
this.getData();
}
getData() {
this.someService
.getData()
.subscribe(resp => {
// here you can set your data the way you want.
this.invoiceData = resp;
})
}
}