我正在尝试构建一个包含一个视频和两个图表的网页。当我尝试显示 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>
Run Code Online (Sandbox Code Playgroud)
我的 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
}]
},
});
Run Code Online (Sandbox Code Playgroud)
我的 multi_head.js 文件包含: …