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

原因

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

解决

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

方法一

使用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('');

 好了，问题解决