Angular 4:PrimeNg DoughnutChart 动态数据问题。

Question

最近在做primeng图表，用的是PrimeNG提供的DoughnutChart。我想将存储在变量中的数值作为此图表的 ts 文件中的数据传递，但它不会在 UI 中显示任何内容，好像数据是静态的，它绝对有效 fine.This 是相同的代码：

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>

Answer 1

问题可能是您在服务呼叫完成之前设置了 invoiceData。因为，您将不得不等待一段时间来填充 invoiceData，您可能也想延迟 primeng 图表初始化。您可以使用 *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;
             })
     }

 }

Angular 4:PrimeNg DoughnutChart 动态数据问题。

Angular 4:PrimeNg DoughnutChart dynamic data issue.

typescript

chart.js

angular2-forms

primeng

angular