错误：chart.min.js:13 未捕获（承诺中）错误：画布已在使用中。必须先销毁 ID 为“0”的图表，然后才能重新使用画布

Question

我正在尝试构建一个包含一个视频和两个图表的网页。当我尝试显示 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_grapg.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'
    }]
   },
});