为什么ChartJs抛出未定义的长度，尽管一切似乎正确

问题描述

我有一个非常基本的图表对象，其中包含用于chartData的xAxis数组和用于以下chartLabel的yAxis

  public charts=[
    {
      xAxis : [
     1,2,3,4,5,6
      ],yAxis : [
      10,11,12,13,14,15
      ]
    },{
       xAxis : [
     2,7,8,9
      ],yAxis : [
      11,15,33,24,16
      ]
    } 
  ]

这就是我迭代它们并在HTML端创建画布的方式

<div id="chart-container" *ngIf="charts">
  <ng-container *ngFor="let item of charts">
    <canvas  id="canvas" baseChart [chartType]="chartType" [datasets]="item.xAxis" [labels]="item.yAxis"  [options]="chartOptions"></canvas>
  </ng-container>
</div>

但是它会引发如下错误

Error: Cannot read property 'length' of undefined

我真的不知道为什么会发生。希望有人能解决这个问题并帮助我

Stackblitz示例：https://stackblitz.com/edit/line-chart-nlucvd?file=app/app.component.ts

解决方法

Stackblitz演示：https://stackblitz.com/edit/line-chart-xmy3vt?file=app%2Fapp.component.html

您需要一种适当的数据格式，以便根据官方示例（数组+带有data关键字的对象）将其传递给图表画布元素

 public lineChartData: ChartDataSets[] = [
    { data: [65,59,80,81,56,55,40]},];

更改后的html给出了输出

<div id="chart-container" *ngIf="charts">
    <ng-container *ngFor="let item of charts;let i=index">
        <canvas id="canvas" baseChart [chartType]="chartType" [datasets]="[dataSet[i]]" [labels]="item.yAxis">
        </canvas>
    </ng-container>
</div>