使用Chart.js触发Canvas复用错误，图表正常显示求解决

这个错误的核心原因是：你多次调用draw()函数时，每次都会创建一个新的Chart实例绑定到同一个myChart canvas元素，但旧的实例并未被销毁，导致Canvas被多个Chart实例占用，触发冲突报错。

下面是几种可行的解决方法：

方法1：保留实例引用，创建前销毁旧实例 #

将Chart实例变量提升到函数外部，每次调用draw()前检查是否已有实例，有则销毁后再创建新实例：

let myChart; // 全局/外部作用域保存实例引用

function draw() {
    // 销毁已存在的图表实例
    if (myChart) {
        myChart.destroy();
    }

    const labels = [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
    ];

    const data = {
        labels: labels,
        datasets: [{
            label: 'test',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
        }]
    };

    const config = {
        type: 'doughnut',
        data: data,
        options: {}
    };

    myChart = new Chart(
        document.getElementById('myChart'),
        config
    );
}

方法2：用Chart.getChart()查找并销毁实例 #

不需要全局变量，直接通过Canvas的ID查找已绑定的Chart实例：

function draw() {
    // 通过Canvas ID获取已存在的图表实例
    const existingChart = Chart.getChart('myChart');
    if (existingChart) {
        existingChart.destroy();
    }

    // 后续创建图表的代码和原代码一致
    const labels = [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
    ];

    const data = {
        labels: labels,
        datasets: [{
            label: 'test',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
        }]
    };

    const config = {
        type: 'doughnut',
        data: data,
        options: {}
    };

    new Chart(
        document.getElementById('myChart'),
        config
    );
}

方法3：更新现有实例数据（推荐，性能更优） #

如果只是需要更新图表数据而非完全重建，直接修改现有实例的数据并调用update()方法，避免重复创建实例：

let myChart;

function draw() {
    const labels = [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
    ];

    const newData = {
        labels: labels,
        datasets: [{
            label: 'test',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
        }]
    };

    if (myChart) {
        // 更新现有实例的数据
        myChart.data = newData;
        myChart.update();
    } else {
        // 首次创建实例
        const config = {
            type: 'doughnut',
            data: newData,
            options: {}
        };
        myChart = new Chart(document.getElementById('myChart'), config);
    }
}

方法选择建议 #

• 如果需要完全重置图表配置（比如切换图表类型），用方法1或方法2；
• 如果只是更新数据，优先用方法3，减少DOM操作和实例创建开销。

内容的提问来源于stack exchange，提问作者Tan Jun Rong