数据或数据集字段是角度4中呈现字符条所必需的

Question

我正在尝试在我的角度4项目中使用ng2-charts

HTML：

 <canvas baseChart
            [datasets]="customerBarChartData"
            [colors]="barChartColors"
            [options]="customerBarChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            ></canvas>

TS：

  geochatArry: Array<any> = [];
  ....
  public customerBarChartData:any[] = this.geochatArry;
  .... 
  /// Service
   this.geochatArry=data.json();
   console.log(this.geochatArry);

但我得到了ng-charts configuration error,data or datasets field are required to render char bar。请告诉我我的错误在哪里。

感谢。

Answer 1

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

<div style="display: block" *ngIf="customerBarChartData">
   <canvas baseChart
   [datasets]="customerBarChartData"
   [colors]="barChartColors"
   [options]="customerBarChartOptions"
   [legend]="barChartLegend"
   [chartType]="barChartType">
</canvas>
</div>

Answer 2

您绑定到customerBarChartData，由于geochatArry为空，因此初始化为空。当您稍后设置geochatArry时，您没有像您认为的那样设置customerBarChartData。

添加console.log（this.customerBarChartData）进行验证。

Answer 3

一种解决方案是在收到数据后创建图表。

构建图表后，分配一个变量，如

chartReady = true;

在您的HTML中，用

包裹图表

*ngIf="chartReady"

因此您可以隐藏它，直到建立图表为止。