概览

G2 中视图复合（View Composition） 提供了在一个可视化中绘制多个图表的能力。G2 定义了一个视图树（View Graph） 去描述多视图图表（Multi-View Plot）。

({
  type: 'spaceLayer',
  children: [{ type: 'view' }, { type: 'view' }],
});

空间

最基础的视图复合方式就是空间复合（Space Composition），只是对空间进行划分。

一个比较常见的复合方式是 composition.spaceLayer：将多个图表重叠在一起。使用场景是这些视图拥有的不同的坐标系，比如下面的条形图和饼图。

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

const data = [
  { genre: 'Shooter', sold: 350 },
  { genre: 'Sports', sold: 275 },
  { genre: 'Other', sold: 150 },
  { genre: 'Action', sold: 120 },
  { genre: 'Strategy', sold: 115 },
];

chart.options({
  type: 'spaceLayer',
  children: [
    // 条形图
    {
      type: 'interval',
      data,
      encode: { x: 'genre', y: 'sold' },
    },
    // 饼图
    {
      type: 'interval',
      paddingLeft: 300,
      paddingBottom: 250,
      coordinate: { type: 'theta' },
      transform: [{ type: 'stackY' }],
      data,
      encode: { y: 'sold', color: 'genre' },
      legend: { color: false },
    },
  ],
});

chart.render();

同时也可以使用 composition.spaceFlex 去让视图水平或者竖直排列。

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
});

const data = [
  { genre: 'Shooter', sold: 350 },
  { genre: 'Sports', sold: 275 },
  { genre: 'Other', sold: 150 },
  { genre: 'Action', sold: 120 },
  { genre: 'Strategy', sold: 115 },
];

chart.options({
  type: 'spaceFlex',
  children: [
    // 条形图
    {
      type: 'interval',
      data,
      encode: { x: 'genre', y: 'sold' },
    },
    // 饼图
    {
      type: 'interval',
      coordinate: { type: 'theta' },
      transform: [{ type: 'stackY' }],
      data,
      encode: { y: 'sold', color: 'genre' },
      legend: { color: false },
    },
  ],
});

chart.render();

同时这些复合方式是可以嵌套的，所以很容易通过一个单独的声明去实现一个报表。

分面

分面复合（Facet Composition） 和空间复合的不同在于：它还会对数据划分，每个视图展现原始数据的一个子集。

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  height: 260,
  width: 800,
  paddingLeft: 40,
  paddingBottom: 50,
});

chart.options({
  type: 'facetRect',
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/anscombe.json',
  },
  // 将数据按照 series 字段划分成一个个子集，
  // 并且是 x 方向排列
  encode: { x: 'series' },
  children: [
    {
      type: 'point',
      padding: 'auto',
      inset: 10,
      encode: { x: 'x', y: 'y' },
      style: { stroke: '#000' },
    },
  ],
});

chart.render();

重复

重复复合（Repeat Composition） 和分面的区别在于：它的每个视图展现的是全量数据，只不过会对编码进行重复，从而绘制出多个视图。

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  width: 900,
  height: 900,
  padding: 'auto',
  paddingLeft: 55,
  paddingBottom: 45,
});

chart.options({
  type: 'repeatMatrix',
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/penguins.json',
    // 数据处理
  },
  // 指定需要重复的编码
  // 一共会生成 4 * 4 = 16 个视图
  // 每个视图的 x 和 y 编码是下面字段的叉乘
  encode: {
    position: [
      'culmen_length_mm',
      'culmen_depth_mm',
      'flipper_length_mm',
      'body_mass_g',
    ],
  },
  children: [
    { type: 'point', padding: 'auto', encode: { color: 'species' } },
  ],
});

chart.render();

时间

时间复合在空间上管理视图，用于做动画。

import { Chart } from '@antv/g2';

fetch(
  'https://gw.alipayobjects.com/os/bmw-prod/fbe4a8c1-ce04-4ba3-912a-0b26d6965333.json',
)
  .then((res) => res.json())
  .then((data) => {
    const chart = new Chart({
      container: 'container',
      paddingTop: 60,
      paddingLeft: 100,
    });

    // 参考 css animation 的描述
    chart.options({
      type: 'timingKeyframe',
      iterationCount: 2, // 迭代次数
      direction: 'alternate', // 方向
      duration: 1000, // 持续时间
      children: [
        {
          type: 'interval',
          transform: [{ type: 'groupX', y: 'mean' }],
          data,
          encode: { x: 'gender', y: 'weight', color: 'gender', key: 'gender' },
        },
        {
          type: 'point',
          data,
          encode: {
            x: 'height',
            y: 'weight',
            color: 'gender',
            shape: 'point',
            groupKey: 'gender',
          },
        },
      ],
    });

    chart.render();
  });