ng2-charts 空初始数据集答案

【问题标题】：ng2-charts empty initial datasetng2-charts 空初始数据集
【发布时间】：2018-03-26 14:30:33
【问题描述】：

我正在使用 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 中添加空对象。但这限制了我可以返回多少数据。目前，我不确定需要返回多少数据，或者这是否是任意的。

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

【问题讨论】：

尝试：lineChartData:Array<any> = []; 当你得到你的数据时，做let newChartData:Array<any> = []; newChartData.push({data: [1, 2], label: 'Series A'}, {data: [1, 2], label: 'Series B'}); lineChartData = newChartData; 关于 ng2-charts 库的一件事我注意到它不喜欢你修改数据数组，但是你可以像我展示的那样换掉它。
问题是第一部分无法工作，因为数据集是空的，这会抛出一个错误，指出预期的数据值没有定义。
一种解决方案是在您收到数据后创建图表。构建图表后，分配一个变量，如chartReady = true;。在您的 html 中，用 *ngIf="chartReady" 包裹图表，这样您就可以在构建图表之前隐藏它。
@user1849060 ：你能解决上述问题吗？我也在尝试将数据动态绑定到我的图表，但没有这样做。任何帮助都会很棒。
@user1849060 请看这个stackoverflow.com/questions/54770459/…

标签： angular charts ng2-charts

【解决方案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>

【讨论】：

出于某种原因，这没有帮助。只是遇到了同样的问题并尝试了您的提示。
我自己使用了类似的过程来解决这个问题，除了检查保存图表数据的变量之外，我创建了一个名为 chartReady 的布尔变量，然后在 *ngIf 和在我准备好图表数据后将其设置为true。 @JakubHubert 也许这个想法对你的项目也有帮助？