配置图表主题

G2 在绘图时，首先确定数据是如何展示的，然后再通过主题系统对细节进行控制。在 G2 中主题控制着图表的非数据元素外观，它不能改变图表的感官性质，但是可以使图表变得更具美感，满足整体一致性的要求，包括图表的坐标轴、图例、网格线等的样式及几何标记的颜色搭配等。

我们可以在 G2 中：

  • 使用内置主题
  • 修改内置主题的某些元素
  • 注册自定义主题

使用内置主题

G2 4.0 默认提供了一种内置主题，命名为 'default'，如果内置了多个主题的话，可以使用以下方法对主题进行切换或者修改内置主题。

  • 在初始化 chart 时指定
  1. const chart1 = new Chart({
  2.   container: 'container',
  3.   theme: 'antv', // 使用命名为 'antv' 的主题
  4. });
  6. const chart2 = new Chart({
  7.   container: 'container',
  8.   theme: {
  9.     defaultColor: 'red',
  10.   }, // 修改内置主题的某些配置
  11. });
  • 通过 chart.theme() 接口配置
  1. chart1.theme('antv'); // 切换全套主题
  3. chart2.theme({
  4.   defaultColor: 'red',
  5. }); // 修改内置主题的某些配置
  • 在 view 上配置主题
  1. // 在创建 view 的时候声明主题
  2. const view1 = chart.createView({
  3.   theme: 'antv',
  4. });
  5. // 在创建 view 的时候修改主题
  6. const view2 = chart.createView({
  7.   theme: {
  8.     defaultColor: 'red',
  9.   },
  10. });
  12. // 通过 theme() 接口声明
  13. view1.theme('antv');
  15. view2.theme({
  16.   defaultColor: 'red',
  17. });
  • 在 Geometry 上配置主题
  1. chart
  2.   .interval({
  3.     theme: {
  4.       defaultColor: 'red',
  5.     },
  6.   })
  7.   .position('x*y');

即 G2 支持分别在 chart, view 以及 geometry 上配置主题，这三者的优先顺序为：geometry > view > chart。

注册自定义主题

G2 提供了两种注册主题方式：

  • 基于默认的主题结构，应用不同的主题样式表
  • 自定义主题结构 🌰 一个简单的例子：
  1. import { registerTheme } from '@antv/g2';
  3. registerTheme('themeName', {}); // 注册名为 'themeName' 的全新的主题结构
  • 使用注册主题
  1. chart.theme('themeName');

关于自定义主题的具体使用，请阅读自定义主题。