如何为所有Ant Design Charts统一设置全局字体？

方法一：封装全局基础配置函数 #

通过封装一个返回基础配置的函数，在每个图表中复用该配置并合并自定义参数，避免重复编写字体样式：

// 定义全局基础图表配置
const getBaseChartConfig = (customConfig = {}) => {
  const globalFontStyle = { fontFamily: 'Roboto' };
  
  return {
    // 统一设置坐标轴标签字体
    axis: {
      x: { label: { style: globalFontStyle } },
      y: { label: { style: globalFontStyle } },
      // 如果有其他坐标轴（如双Y轴），可在此扩展
    },
    // 统一设置图例字体
    legend: {
      color: { style: globalFontStyle },
    },
    // 可扩展其他需要统一字体的组件，比如tooltip
    tooltip: {
      domStyles: { label: globalFontStyle },
    },
    // 允许传入自定义配置覆盖基础设置
    ...customConfig
  };
};

// 使用示例：创建折线图配置
const lineChartConfig = getBaseChartConfig({
  data: yourChartData,
  xField: 'date',
  yField: 'value',
  // 这里可以添加当前图表独有的配置
});

方法二：通过CSS全局覆盖 #

利用@ant-design/charts底层依赖G2Plot的DOM类名，通过CSS全局设置字体样式：

/* 全局覆盖所有图表元素的字体 */
.g2plot-container * {
  font-family: 'Roboto' !important;
}

/* 更精确的选择器（推荐），仅针对图表核心文本元素 */
.g2plot-axis-text,
.g2plot-legend-text,
.g2plot-tooltip-text,
.g2plot-label-text {
  font-family: 'Roboto' !important;
}

注意事项 #

• 方法一的优势是精准可控，不会影响页面其他非图表元素，且支持灵活覆盖局部配置；
• 方法二实现简单，但!important可能会与其他样式冲突，建议使用更精确的类名选择器；
• @ant-design/charts 2.2.6版本暂未提供类似Ant Design的ConfigProvider全局配置组件，上述两种是当前可行的替代方案。

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