Chart.js+ChartDataLabels动态更新图表报错：Cannot read properties of null

核心原因 #

定时更新图表时未正确销毁旧的图表实例，导致ChartDataLabels插件保留了对已失效DOM元素的引用，触发Cannot read properties of null (reading 'x')错误。

解决步骤与代码示例 #

1. 维护全局图表实例引用，每次更新前销毁旧实例
2. 重新初始化完整图表配置（包含ChartDataLabels插件及相关配置）
3. 确保插件正确注册

// 全局存储图表实例
let doughnutChartInstance;

// 初始化/更新图表的统一函数
function updateDoughnutChart(data) {
    // 销毁旧实例，避免插件引用冲突
    if (doughnutChartInstance) {
        doughnutChartInstance.destroy();
    }

    const ctx = document.getElementById('doughnutChart').getContext('2d');
    doughnutChartInstance = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: data.labels,
            datasets: [{
                data: data.values,
                backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0']
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'top' },
                datalabels: {
                    formatter: (value, ctx) => {
                        const total = ctx.dataset.data.reduce((acc, curr) => acc + curr, 0);
                        return `${((value / total) * 100).toFixed(1)}%`;
                    },
                    color: '#ffffff',
                    font: { weight: 'bold', size: 14 }
                }
            }
        },
        // 明确传入插件，确保每次初始化都绑定
        plugins: [ChartDataLabels]
    });
}

// 定时拉取数据并更新图表
function fetchAndUpdate() {
    fetch('/api/your-data-endpoint')
        .then(res => res.json())
        .then(data => updateDoughnutChart(data))
        .catch(err => console.error('数据拉取失败:', err));
}

// 页面加载初始化+定时更新
window.addEventListener('load', () => {
    fetchAndUpdate();
    // 每5秒更新一次，可按需调整间隔
    setInterval(fetchAndUpdate, 5000);
});

额外排查点 #

• 版本兼容性：确认Chart.js（需3.x+）与ChartDataLabels（需2.x+）版本匹配，版本不兼容会引发未知错误
• 全局插件注册：如果不想每次初始化都传入插件，可在页面开头全局注册：Chart.register(ChartDataLabels)
• 数据结构校验：确保后端返回的data.labels和data.values数组长度一致，避免数据集结构异常导致插件报错

内容的提问来源于stack exchange，提问作者F A Fernández