Angular Chart.js多重画布

下面的代码只能用于图表，但我必须制作多个图表。如何使下面的代码成为图表数组，并在画布中使用*ngFor将其显示出来

@ViewChild（'pr_chart'）chartElementRef:ElementRef；

ngAfterViewInit（）{
设ctx=this.chartElementRef.nativeElement；
ctx=ctx.getContext（'2d'）；
this.chart=新图表（ctx{
键入：“行”，
选项：{
图例：{
显示：假
},
比例：{
xAxes：[{
显示：假
}],
雅克斯：[{
显示：假
}],
}
},
数据：{
标签：[1500、1600、1700、1750、1800、1850、1900、1950、1999、2050]，
数据集：[{
数据：[8637810630650711132217835000]，
//标签：“非洲”，
边框颜色：“#3bd19c”，
填充：假
}]
}
});
}

---

您可以使用

@ViewChildren

获取

实例的多个引用。我用上面的例子放了一个例子，展示了如何做到这一点：

基本上，我的控制器上有一组图表元素：

chartData:Chart.chartData[]=[
{
标签：['1500'，'1600'，'1700'，'1750'，'1800'，'1850'，'1900'，'1950'，'1999'，'2050']，
数据集：[{
数据：[8637810630650711132217835000]，
边框颜色：“红色”，
填充：假
}]
},
{
标签：['1500'，'1600'，'1700'，'1750'，'1800'，'1850'，'1900'，'1950'，'1999'，'2050']，
数据集：[{
数据：[863781063065071111132217835000]。相反（），
边框颜色：“蓝色”，
填充：假
}]
}
];

这些用于在我的模板中呈现多个图表：

您可以使用

@ViewChildren

获取每个

pr\u图表

实例，而不只是使用

@ViewChildren

获取单个引用：

@ViewChildren（'pr_chart'，{read:ElementRef}）chartElementRefs:QueryList；

一旦我们有了这些引用，我们就可以通过使用该引用和相关数据来循环使用它们来创建适当的图表：

ngAfterViewInit（）{
this.charts=this.chartElementRefs.map（（chartElementRef，索引）=>{
const config=Object.assign（{}，baseConfig，{data:this.chartData[index]}）；
返回新图表（chartElementRef.nativeElement，配置）；
});
}

因为在我的示例中，我将复制每个图表的大部分配置，并且只有数据在更改，所以我创建了一个基本配置，在呈现每个图表时共享该配置：

const baseConfig:Chart.ChartConfiguration={
键入：“行”，
选项：{
回答：是的，
MaintaintAspectRatio:false，
图例：{display:false}，
比例：{
xAxes:[{display:false}]，
yAxes:[{display:false}]，
}
}
};

您是否尝试使用

ViewChildren

而不是

ViewChildren

来获取匹配引用的列表，而不仅仅是一个引用？我不熟悉这一点，您能给我举个例子吗？如果是静态数据，多个图表可以正常工作，但是图表数据是动态添加的，没有显示图表