Javascript 为什么chartJs抛出未定义的长度，尽管一切看起来都是正确的

我有一个非常基本的图表对象，包含用于chartData的xAxis数组和用于ChartLabel的yAxis，如下所示

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

Error: Cannot read property 'length' of undefined

这就是我迭代它们并在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>

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

Stackblitz示例：

Stackblitz演示：

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

更改了提供输出的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>

---

尝试打印循环中的项目，看看它是否有值或未定义。Console.log（图表）工作正常。我可以打印在.ts上定义的所有内容

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