Chart.js v3/v4 图表实例更新与深色模式切换指南

// Chart.js v3/v4 中会报错
Chart.helpers.each(Chart.instances, function(instance){
    instance.chart.update(); // 错误：instance.chart 是 undefined
});

// Chart.js v3/v4 中的正确更新方式
Chart.helpers.each(Chart.instances, function(instance){
    instance.update(); // 直接调用实例的 update() 方法
});

/**
 * 根据主题设置更新所有 Chart.js 图表实例的颜色。
 * @param {boolean} darkTheme - 如果为 true 则应用深色主题，否则应用浅色主题。
 */
function applyThemeToCharts(darkTheme = false) {
  // 1. 更新文档根元素的类，以切换整体页面主题（CSS控制）
  if (darkTheme) {
    document.documentElement.classList.add('dark');
    localStorage.setItem('color-theme', 'dark');
  } else {
    document.documentElement.classList.remove('dark');
    localStorage.setItem('color-theme', 'light');
  }

  // 2. 更新 Chart.js 的全局默认颜色
  // 注意：Chart.defaults.color 仅影响部分文本颜色，不影响轴线等
  Chart.defaults.color = darkTheme ? 'white' : 'black';

  // 3. 遍历所有 Chart.js 实例并更新其特定配置
  Chart.helpers.each(Chart.instances, function (instance) {
    const options = instance.config.options;

    // 遍历所有轴（scales），并更新其颜色属性
    for (let scaleId in options.scales) {
      const scale = options.scales[scaleId];

      if (darkTheme) {
        // 深色模式配置
        if (scale.grid) {
          scale.grid.color = 'rgba(255, 255, 255, 0.2)'; // 更柔和的白色网格线
          scale.grid.borderColor = 'white';
        }
        if (scale.ticks) {
          scale.ticks.color = 'white'; // 白色刻度标签
        }
      } else {
        // 浅色模式配置
        if (scale.grid) {
          scale.grid.color = 'rgba(0, 0, 0, 0.1)'; // 浅灰色网格线
          scale.grid.borderColor = 'rgba(0, 0, 0, 0.1)';
        }
        if (scale.ticks) {
          scale.ticks.color = 'black'; // 黑色刻度标签
        }
      }
    }

    // 4. 更新图表以应用新的配置
    instance.update();
  });
}

// 页面加载时根据本地存储或系统偏好设置主题
const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const storedTheme = localStorage.getItem('color-theme');

let initialDarkTheme = false;
if (storedTheme === 'dark' || (!storedTheme && isSystemDark)) {
    initialDarkTheme = true;
}
applyThemeToCharts(initialDarkTheme); // 首次加载时应用主题

// 主题切换按钮事件监听
const themeToggleBtn = document.getElementById('theme-toggle');
themeToggleBtn.addEventListener('click', function() {
    const currentTheme = localStorage.getItem('color-theme');
    const newDarkTheme = (currentTheme === 'light' || !currentTheme) ? true : false;
    applyThemeToCharts(newDarkTheme);

    // 根据需要切换主题按钮的图标
    const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
    const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
    themeToggleDarkIcon.classList.toggle('hidden');
    themeToggleLightIcon.classList.toggle('hidden');
});