一页中的多个图表-ChartJS
我尝试在一页中添加多个图表，但是如果错误画布已经在使用中。在可以重复使用画布之前，必须销毁具有ID“ 0”的图表。
经过研究，我读到我必须将画布设置在Div中，因为：
检测何时无法直接从画布元素完成帆布大小更改。 Chart.js使用其父容器更新画布渲染和显示尺寸。但是，此方法要求仅将容器放置在图表画布上。然后可以通过为容器大小</p>设置相对值来实现响应性
，因此我确实有同样的错误。
//chart1
const ctx = document.getElementById('chart1').getContext('2d')
const data1 = {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
}]
}
const options1 = {
scales: {
y: {
beginAtZero: true
}
}
}
const myChart1 = new Chart(ctx, {
type: 'doughnut',
data: data1,
options: options1
})
//chart2
const ctx2 = document.getElementById('chart2').getContext('2d')
const data2 = {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
}]
}
const options2 = {
scales: {
y: {
beginAtZero: true
}
}
}
const myChart2 = new Chart(ctx, {
type: 'line',
data: data2,
options: options2
})<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GraphJS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div style="width: 400px; height: 400px; margin: 0 auto 100px auto;">
<h1 style="text-align: center;">Tier 1</h1>
<canvas id="chart1"></canvas>
</div>
<div style="width: 400px; height: 400px; margin: 0 auto 100px auto;">
<h1 style="text-align: center;">Category</h1>
<canvas id="chart2"></canvas>
</div>
<script src="./index.js"></script>
</body>
</html>知道我的错误在哪里？
I tried to add multiple charts in one page, but had the error Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused.
After research, I read that I had to set my canvas in div because :
Detecting when the canvas size changes can not be done directly from the CANVAS element. Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. Responsiveness can then be achieved by setting relative values for the container size
So I did, but I still have the same error.
//chart1
const ctx = document.getElementById('chart1').getContext('2d')
const data1 = {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
}]
}
const options1 = {
scales: {
y: {
beginAtZero: true
}
}
}
const myChart1 = new Chart(ctx, {
type: 'doughnut',
data: data1,
options: options1
})
//chart2
const ctx2 = document.getElementById('chart2').getContext('2d')
const data2 = {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
}]
}
const options2 = {
scales: {
y: {
beginAtZero: true
}
}
}
const myChart2 = new Chart(ctx, {
type: 'line',
data: data2,
options: options2
})<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GraphJS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div style="width: 400px; height: 400px; margin: 0 auto 100px auto;">
<h1 style="text-align: center;">Tier 1</h1>
<canvas id="chart1"></canvas>
</div>
<div style="width: 400px; height: 400px; margin: 0 auto 100px auto;">
<h1 style="text-align: center;">Category</h1>
<canvas id="chart2"></canvas>
</div>
<script src="./index.js"></script>
</body>
</html>Any idea where is my mistake ?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您将
CTX作为Chart2的参数，该参数应为ctx2。目前，您的两个图都指向具有IDChart1的元素的同一文档元素。只是这样做
You are passing
ctxas a parameter for chart2, which should bectx2. Right now both of your graphs are pointing to same document element i.e. to element with idchart1.Just do this