我正在尝试在angular中实现chart.js，已经写了一个简单的代码来在html上显示图表，但是页面上没有输出，也没有错误。我不知道问题出在哪里，为什么显示图表失败。slackblitz url for reference
我在组件中尝试的代码：
this.chart1 = new Chart('canvas', {
type: 'doughnut',
data: {
labels: ['solid', 'liquid', 'unknown'],
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
}]
}
}
});请帮助我了解我失败的地方，谢谢
2条答案
按热度按时间jutyujz01#
组件中的代码是正确的，问题是在html中，将
<canvas>标签 Package 在<div>内，解决了@Quan Vo评论中所述的问题示例：
为什么
<canvas>标签应该在<div>标签内，因为这个标签可以引用this article简而言之：
HTML5 Canvas元素是一个类似于
<div>、<a>或<table>标签的HTML标签，不同之处在于它的内容是用JavaScript呈现的。为了利用HTML5 Canvas，我们需要将canvas标签放置在HTML文档中的某个位置，用JavaScript访问canvas标签，创建一个上下文，然后利用HTML5 Canvas API绘制可视化效果。nzkunb0c2#
我也遇到了这个问题，问题出在导入上，我使用了“import { Chart } from“chart.js”“，我看到了另一种导入方法，在我的例子中解决了这个问题。它是这样的，“import Chart from”chart.js/auto“。如果我想了解更多信息，我在这个链接中看到了这个解决方案：https://www.angularfix.com/2021/10/chart-js-graph-not-showing-on-canvas.html