Eror： chart.min.js：13 未捕获(承诺中)错误：画布已在使用中。必须先销毁 ID '0'的图表，然后才能重复使用画布

Question

我正试图建立一个网页，有一个视频和2个图表。当我试图展示2图我得到以下信息:"错误:画布已在使用中。ID为'0'的图表必须在画布被重用之前被销毁。"我不明白为什么我需要破坏画布，如果我使用不同的画布不同的图形在同一页上。我的代码是:

<div class='FisrtChat'>
<canvas id="chart" width="300" height="50"></canvas>
</div>
<div class='SecondChart'>
<canvas id="chart_Multi" width="300" height="50"></canvas>
</div>
<script src="final_graph.js"></script>
<script src="final_graph.js"></script>

我的final_graph .js文件包含:

async function chartIt() {
const data = await getData();
const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: data.xs,
datasets: [{
label: 'Finall Q_value throw time',
data: data.ys,
backgroundColor: ['rgba(255, 99, 132, 0.2)', ],
borderColor: ['rgba(255, 99, 132, 1)', ],
borderWidth: 1
}]
},
});

}我的multi_head.js文件包含:

async function chartIt() {
const data = await getData();
const ctx = document.getElementById('chart_MULTI').getContext('2d');
const myChart_H1 = new Chart(ctx, {
datasets: [{
label: 'Head 1',
data: data.ys1,
borderColor: 'red'
}]
},
});

提前谢谢你，雅艾尔

Answer 1

如果您的图表不止创建一次，则必须添加以下代码块。

let chartStatus = Chart.getChart("chart_MULTI");
if (chartStatus != undefined) {
chartStatus.destroy();
}   

完整代码-(您可以对另一个图表执行相同操作)

async function chartIt() {
const data = await getData();
const ctx = document.getElementById('chart_MULTI').getContext('2d');
let chartStatus = Chart.getChart("chart_MULTI");
if (chartStatus != undefined) {
chartStatus.destroy();
}
const myChart_H1 = new Chart(ctx, {
datasets: [{
label: 'Head 1',
data: data.ys1,
borderColor: 'red'
}]
},
});