chart.js报错“Canvas is already in use. Chart ...must be destroyed before the canvas can be reused ”

最新推荐文章于 2025-05-30 09:03:37 发布

置顶 zhoupenghui168

最新推荐文章于 2025-05-30 09:03:37 发布

阅读量818

点赞数 1

分类专栏：前端 # js 文章标签： chartjs chart

本文链接：https://blog.csdn.net/zhoupenghui168/article/details/134011282

版权

前端同时被 2 个专栏收录

22 篇文章

订阅专栏

11 篇文章

订阅专栏

博客指出使用Chart绘图时出现冲突的原因是重复实例化Chart，导致后面的图遮盖前面的图，且绘制图的canvas被占用。给出两种解决方法，一是用chart.js自带更新函数更新数据，新建实例前检测并销毁已有实例；二是用jQuery清除并新增canvas。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原因

本来就实例化了一个Chart，后面又有一个Chart,把前面的图遮盖，从错误提示看，绘制图的canvas被占用，再次使用其绘制图形时就出现冲突,有两种方法解决

解决

chart div如下：需要引入chart.js

<div class="chartjs">
    <canvas id="test_canvas"></canvas>
</div>

方法一

使用chart.js自带的更新函数来更新数据从而一直使用一个图,chart.js官网的API帮助文档中介绍了destroy函数，该函数用于销毁chart实例，清除对象中保存的引用以及关联的事件监听器，该函数须在重新使用canvas绘制新图形之前使用。
在新建chart实例前增加检测代码，如果Chart对象已经是chart类型实例，则调用destroy函数销毁实例，然后再新建实例，代码如下：

if(chart instanceof Chart) {
     chart.destroy();
}

var ctx = document.getElementById("canvas");
const labels = canvas['date'];
const data = {
labels: labels,
datasets:[
{
        label: '图表名',
        borderWidth: 1, //画笔宽度
        data: canvas['data'],
        fill: false, // 默认为false, 是否填充折线与X轴的中间区域
        borderColor: 'red',    //设置折线的颜色
        backgroundColor: 'red',    //设置背景的颜色
        tension: 0.1,   //默认为0, 既绘制直线，大于0的话则点与点用曲线连接
        showLine: true, //默认为true,设置为false，则仅显示折线图中的点，不会显示直线
        },
    ]
};

chart = new Chart(ctx, {
    type: "line",
    data: data,
    options: []
});

方法二

用jQuery清除/新增canvas：每次绘图前删除之前的canvas，然后再重新添加一个canvas

$('#canvas').remove();
$('.chartjs').append('<canvas id="canvas"></canvas>');

好了，问题解决