Chart.js重复创建图表尺寸异常：如何正确销毁或更新图表？

问题 #

使用Chart.js时基础功能正常，但在同一canvas中重复创建图表时，会触发“需先销毁原有图表”的报错。按照方案实现销毁逻辑后虽无报错，但重复创建的图表尺寸/比例出现异常。需要解决两个问题：

• 如何正确销毁并重建图表以保持尺寸正常
• 如何直接更新图表替代销毁重建

现有代码如下：

JavaScript代码 #

let chartStatus = Chart.getChart("line-chart"); 
if (chartStatus != undefined) {
    chartStatus.destroy();
    //$("div.line-chart").remove();
    //$("div.line-chart").append('<canvas id="line-chart" style="width: 1221px; height: 280px;"></canvas>');
}

new Chart(document.getElementById("line-chart"), {
    type: 'line',
    data: {
            labels: labelX,
            datasets: [{ 
            data: waga,
                label: "Waga",
                borderColor: "#3e95cd",
                borderWidth: 1,
                fill: false
        }
        ]
    },
    options: {
            title: {
            display: true,
            responsive: true,
            maintainAspectRatio: false
        }
    }
});

HTML代码 #

<div><canvas id="line-chart" style="width: 1221px; height: 280px;"></canvas></div>

解决方案 #

方法一：正确销毁并重建图表（修复尺寸异常） #

你的代码存在关键错误：responsive和maintainAspectRatio配置被嵌套在title对象下，Chart.js无法正确识别该配置，这是尺寸异常的核心原因。此外，销毁图表后重置canvas尺寸，能进一步确保重建时参数准确。

修改后的代码：

let chartStatus = Chart.getChart("line-chart"); 
const canvas = document.getElementById("line-chart");

if (chartStatus) {
    chartStatus.destroy();
    // 重置canvas为初始样式尺寸
    canvas.style.width = "1221px";
    canvas.style.height = "280px";
    // 清除canvas绘图缓存（可选，避免残留内容干扰）
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

new Chart(canvas, {
    type: 'line',
    data: {
        labels: labelX,
        datasets: [{ 
            data: waga,
            label: "Waga",
            borderColor: "#3e95cd",
            borderWidth: 1,
            fill: false
        }]
    },
    options: {
        title: {
            display: true
        },
        // 响应式配置必须放在options根节点
        responsive: true,
        maintainAspectRatio: false
    }
});

方法二：直接更新图表（无需销毁重建） #

如果仅需更新数据，无需销毁重建图表，直接修改实例数据后调用update()方法即可，这是更高效的方案：

// 全局存储图表实例，避免重复查询DOM
let lineChart = null;
const canvas = document.getElementById("line-chart");

if (lineChart) {
    // 更新数据
    lineChart.data.labels = labelX;
    lineChart.data.datasets[0].data = waga;
    // 若需修改其他配置，直接修改lineChart.options即可
    // 触发图表更新
    lineChart.update();
} else {
    // 首次创建图表
    lineChart = new Chart(canvas, {
        type: 'line',
        data: {
            labels: labelX,
            datasets: [{ 
                data: waga,
                label: "Waga",
                borderColor: "#3e95cd",
                borderWidth: 1,
                fill: false
            }]
        },
        options: {
            title: {
                display: true
            },
            responsive: true,
            maintainAspectRatio: false
        }
    });
}

关键说明 #

• responsive和maintainAspectRatio必须配置在options根级别，不能嵌套在子对象中
• maintainAspectRatio: false会让canvas严格遵循你设置的样式宽高，不会自动调整比例
• 直接更新图表的方式性能更优，避免了DOM和图表实例的重复创建销毁

内容的提问来源于stack exchange，提问作者bzc0fq