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

Question

我有一个非常基本的图表对象，它包含chartData的xAxis数组和chartLabels的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
]
} 
]

下面是我如何迭代它们并在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

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

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

Answer 1

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

您需要一个合适的数据格式来传递给您基于官方示例的图表画布元素(数组+带数据关键字的对象(

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>