Question

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

  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

动态数据进入时使用* ngIf＆＃34; barChartData＆＃34;然后它会工作。

<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>

ng2-charts空初始数据集

1 个答案: