Chart.js v3/v4中动态更新图表实例以实现主题切换的指南

Chart.helpers.each(Chart.instances, function(instance){
    instance.chart.update(); // 此行在v3/v4中会报错
});

Chart.helpers.each(Chart.instances, function(instance){
    instance.update(); // v3/v4中正确的更新方法
});

// 示例：更新单个图表实例的轴线颜色
function updateChartScales(instance, isDarkMode) {
    const gridColor = isDarkMode ? 'white' : 'rgba(0, 0, 0, 0.1)';
    const tickColor = isDarkMode ? 'white' : 'black';

    for (let scaleId in instance.config.options.scales) {
        const scale = instance.config.options.scales[scaleId];
        if (scale.grid) {
            scale.grid.color = gridColor;
            scale.grid.borderColor = gridColor; // 边框颜色也可能需要同步
        }
        if (scale.ticks) {
            scale.ticks.color = tickColor;
        }
    }
    instance.update(); // 更新后务必调用实例的update方法
}

/**
 * 切换应用主题并更新所有Chart.js图表实例的颜色。
 * @param {boolean} enableDarkMode - 是否启用深色模式。
 */
function applyThemeToCharts(enableDarkMode) {
  // 1. 更新全局默认颜色
  Chart.defaults.color = enableDarkMode ? 'white' : 'black';

  // 2. 更新HTML文档的class，以触发CSS主题切换
  if (enableDarkMode) {
    document.documentElement.classList.add('dark');
    localStorage.setItem('color-theme', 'dark');
  } else {
    document.documentElement.classList.remove('dark');
    localStorage.setItem('color-theme', 'light');
  }

  // 3. 遍历所有Chart.js实例并更新其轴线颜色
  Chart.helpers.each(Chart.instances, function (instance) {
    for (let scaleId in instance.config.options.scales) {
      const scale = instance.config.options.scales[scaleId];

      if (enableDarkMode) {
        // 深色模式配置
        if (scale.grid) {
          scale.grid.color = 'white';
          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';
        }
      }
    }
    instance.update(); // 更新图表实例
  });
}

// 示例用法：
// 在页面加载时，根据本地存储或系统偏好设置初始主题
const isSystemDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
const storedTheme = localStorage.getItem('color-theme');

if (storedTheme === 'dark' || (!storedTheme && isSystemDarkMode)) {
    applyThemeToCharts(true);
} else {
    applyThemeToCharts(false);
}

// 绑定主题切换按钮事件
document.getElementById('theme-toggle').addEventListener('click', function() {
    const currentTheme = localStorage.getItem('color-theme');
    const newThemeIsDark = (currentTheme === 'light' || !currentTheme); // 如果当前是light或未设置，则切换到dark
    applyThemeToCharts(newThemeIsDark);

    // 可选：切换按钮图标
    document.getElementById('theme-toggle-dark-icon').classList.toggle('hidden');
    document.getElementById('theme-toggle-light-icon').classList.toggle('hidden');
});