如何解决Angular 12 Chart.js - 无法显示甜甜圈
我可以显示折线图和条形图。但由于某种原因,我无法显示饼图或圆环图。我经历了各种教程并尝试了各种方法。我想不通!
这是我的代码:
html
<div>
<canvas #theDonutCanvas></canvas>
</div>
ts
@ViewChild('theDonutCanvas') private donutCanvas: ElementRef;
donutChart: any;
doTheDonut() {
this.donutChart = new Chart(this.donutCanvas.nativeElement,{
type: 'doughnut',data: {
labels: ['Solicitado','Entregado','Faltante'],datasets: [
{
label: 'test',data: [
100,200,300
],backgroundColor: ['#0074D9','#2ECC40','#FF4136']
}
]
},options: {
title: {
display: false,text: 'Color test'
},legend: {
position: 'left',display: true,fullWidth: true,labels: {
fontSize: 11
}
},scales: {
xAxes: [{
display: true
}],yAxes: [{
display: true
}]
}
}
});
}
ngAfterViewInit(): void {
this.doTheDonut();
}
错误:ERROR TypeError:无法读取未定义的属性“nativeElement”
codesandbox.io/s/confident-butterfly-3jwn1?file=/src/app/…
解决方法
首先确保register您要使用的控制器、元素、比例等。
除此之外,请确保每个 @ViewChild
定义都指向您的 canvas
模板中的现有 HTML
。检查是否正确引用了 template variables。
请查看您修改后的 CodeSandbox
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。