Chart.js v3/v4实例更新失效问题及重复代码优化需求

一、原代码失效原因 #

在Chart.js v3及更高版本中，Chart.instances存储的每个元素直接就是Chart实例对象，不再包含chart子属性。原代码中instance.chart.update()试图访问不存在的chart属性，导致Cannot read properties of undefined (reading 'update')错误。正确做法是直接调用实例自身的update()方法。

同时，Chart.helpers.each在v3+版本中已被移除，建议使用原生JavaScript的Object.values(Chart.instances).forEach()来遍历所有图表实例。

二、代码优化方案 #

你的代码在初始化和主题切换时存在大量重复逻辑，可通过提取公共函数、清理冗余代码来优化：

优化后的完整代码 #

// 获取DOM元素
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
const themeToggleBtn = document.getElementById('theme-toggle');

// 初始化主题图标状态
const currentTheme = localStorage.getItem('color-theme') || 
                     (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
if (currentTheme === 'dark') {
    themeToggleLightIcon.classList.remove('hidden');
    document.documentElement.classList.add('dark');
} else {
    themeToggleDarkIcon.classList.remove('hidden');
    document.documentElement.classList.remove('dark');
}

// 提取公共函数：根据主题更新所有图表样式
function updateChartsForTheme(theme) {
    // 设置全局默认文本颜色
    Chart.defaults.color = theme === 'dark' ? 'white' : 'black';
    
    // 遍历所有图表实例
    Object.values(Chart.instances).forEach(instance => {
        const scales = instance.config.options.scales;
        if (!scales) return; // 无坐标轴的图表直接跳过
        
        for (const scaleKey in scales) {
            const scale = scales[scaleKey];
            // 更新网格线颜色
            scale.grid.color = theme === 'dark' ? 'white' : 'rgba(0, 0, 0, 0.1)';
            scale.grid.borderColor = theme === 'dark' ? 'white' : 'rgba(0, 0, 0, 0.1)';
            // 更新刻度文本颜色
            scale.ticks.color = theme === 'dark' ? 'white' : 'black';
        }
        
        // 更新图表
        instance.update();
    });
}

// 初始化时更新图表
updateChartsForTheme(currentTheme);

// 主题切换按钮事件监听
themeToggleBtn.addEventListener('click', () => {
    // 切换图标显示
    themeToggleDarkIcon.classList.toggle('hidden');
    themeToggleLightIcon.classList.toggle('hidden');
    
    // 切换主题状态
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    localStorage.setItem('color-theme', newTheme);
    document.documentElement.classList.toggle('dark', newTheme === 'dark');
    
    // 更新图表样式
    updateChartsForTheme(newTheme);
});

优化要点说明 #

• 提取公共函数：将重复的图表更新逻辑封装到updateChartsForTheme函数，初始化和切换时只需调用一次
• 清理冗余代码：移除重复的属性赋值（原代码中同一属性被设置两次）
• 简化主题判断：统一获取当前主题的逻辑，避免重复读取localStorage
• 容错处理：添加判断跳过无坐标轴的图表，避免潜在错误
• 使用原生API：替换已废弃的Chart.helpers.each为Object.values().forEach()

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