如何为Angular项目中的AG Charts设置全局明暗模式？

方案一：利用全局主题覆盖 API #

AG Charts 提供了setGlobalThemeOverrides方法，可以一次性全局配置所有图表的主题样式，无需逐个修改图表配置：

1. 先定义明暗主题的全局覆盖规则

// 浅色主题全局配置
const lightThemeOverrides = {
  common: {
    background: '#ffffff',
    textColor: '#333333'
  },
  // 可针对不同图表类型（如柱状图、折线图）补充样式
  bar: {
    series: {
      fill: '#2196F3'
    }
  }
};

// 深色主题全局配置
const darkThemeOverrides = {
  common: {
    background: '#121212',
    textColor: '#ffffff'
  },
  bar: {
    series: {
      fill: '#64B5F6'
    }
  }
};

2. 在主题切换按钮的点击事件中，同步切换 AgGrid 和 AG Charts 主题

toggleTheme(mode: 'light' | 'dark') {
  // 切换 AgGrid 主题
  document.body.dataset["agThemeMode"] = mode;
  // 切换 AG Charts 全局主题
  const targetOverrides = mode === 'light' ? lightThemeOverrides : darkThemeOverrides;
  agCharts.setGlobalThemeOverrides(targetOverrides);
  // 部分场景下需手动触发图表重绘，可通过组件实例调用refresh方法
}

注意：确保所有图表初始化时未硬编码主题配置，否则全局覆盖规则不会生效。

方案二：通过 Angular 服务统一管理主题 #

适合需要精细化定制主题的场景，通过服务订阅主题变化，所有图表组件自动同步更新：

1. 创建主题管理服务

// theme.service.ts
import { Injectable, EventEmitter, Output } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ThemeService {
  @Output() themeChanged = new EventEmitter<'light' | 'dark'>();
  private currentTheme: 'light' | 'dark' = 'light';

  toggleTheme() {
    this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';
    this.themeChanged.emit(this.currentTheme);
    // 同步切换 AgGrid 主题
    document.body.dataset["agThemeMode"] = this.currentTheme;
  }

  getCurrentTheme() {
    return this.currentTheme;
  }
}

2. 在图表组件中订阅主题变化

// chart.component.ts
import { Component, OnInit } from '@angular/core';
import { ThemeService } from './theme.service';
import { ChartTheme } from 'ag-charts-angular';

@Component({
  selector: 'app-chart',
  template: `<ag-charts-angular [options]="chartOptions"></ag-charts-angular>`
})
export class ChartComponent implements OnInit {
  chartOptions: any = {
    data: [...], // 图表数据
    series: [...] // 图表系列配置
  };

  // 自定义明暗主题
  private lightTheme: ChartTheme = {
    baseTheme: 'ag-default',
    overrides: lightThemeOverrides
  };
  private darkTheme: ChartTheme = {
    baseTheme: 'ag-default-dark',
    overrides: darkThemeOverrides
  };

  constructor(private themeService: ThemeService) {}

  ngOnInit() {
    // 初始化主题
    this.updateChartTheme(this.themeService.getCurrentTheme());
    // 订阅主题切换事件
    this.themeService.themeChanged.subscribe(mode => {
      this.updateChartTheme(mode);
    });
  }

  private updateChartTheme(mode: 'light' | 'dark') {
    this.chartOptions.theme = mode === 'light' ? this.lightTheme : this.darkTheme;
    // 通过对象重新赋值触发 Angular 变更检测，更新图表
    this.chartOptions = {...this.chartOptions};
  }
}

以上两种方案都能避免逐个修改图表配置的繁琐操作，第一种更适合快速全局切换，第二种适配 Angular 组件化架构，便于扩展主题定制逻辑。

内容的提问来源于stack exchange，提问作者Salim Al Mersally