angular - ng2-charts 空初始数据集

Question

我正在试验 ng2-charts使用 Angular 2。我首先按照示例创建折线图。它使用数据集初始化图表，如下所示:

  public lineChartData:Array<any> = [
    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
    {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
  ];

我想通过从服务器检索数据来进行处理 - 这可行，但我不再需要硬编码的初始数据集。如果我将 lineChartData 更改为空，则会出现以下错误:

ERROR Error: ng-charts configuration error,
      data or datasets field are required to render char line
Stack trace:
../../../../ng2-charts/charts/charts.js/BaseChartDirective.prototype.getDatasets@http://localhost:4200/vendor.bundle.js:31447:19
../../../../ng2-charts/charts/charts.js/BaseChartDirective.prototype.getChartBuilder@http://localhost:4200/vendor.bundle.js:31375:24
../../../../ng2-charts/charts/charts.js/BaseChartDirective.prototype.refresh@http://localhost:4200/vendor.bundle.js:31457:22
../../../../ng2-charts/charts/charts.js/BaseChartDirective.prototype.ngOnInit@http://localhost:4200/vendor.bundle.js:31346:13

我能够解决这个问题的唯一方法是在 lineChartData 中添加空对象。但这限制了我可以返回多少数据。目前，我不确定需要返回多少数据，或者这是否是任意的。

有没有一种方法可以在从服务器检索数据时填充一个空的初始数据集？

Answer 1

当动态数据进入“barChartData”数组时使用 *ngIf 它将起作用。

<div style="display: block" *ngIf="barChartData">
                              <canvas baseChart
                                      [datasets]="barChartData"
                                      [labels]="barChartLabels"
                                      [options]="barChartOptions"
                                      [legend]="barChartLegend"
                                      [chartType]="barChartType"
                                      (chartHover)="chartHovered($event)"
                                      (chartClick)="chartClicked($event)"></canvas>
                            </div>