repeatMatrix

根据字段的数量对空间进行划分，然后利用数据在这些子空间可视化。

开始使用

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

const chart = new Chart({
  container: 'container',
  width: 300,
  height: 720,
  paddingLeft: 50,
  paddingBottom: 60,
});

chart.options({
  type: 'repeatMatrix',
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/weather.json',
    transform: [
      {
        type: 'map',
        callback: ({ date, ...d }) => ({
          ...d,
          date: new Date(date).getMonth() + '',
        }),
      },
    ],
  },
  encode: { y: ['temp_max', 'precipitation', 'wind'], x: 'date' },
  children: [
    {
      type: 'line',
      transform: [{ type: 'groupX', y: 'mean' }],
      encode: { color: 'location' },
      scale: { y: { zero: true } },
    },
  ],
});

chart.render();

更多的案例，可以查看图表示例页面。

选项

repeatMatrix 的底层实现和 mark 一致，所以在配置上有很多是一样的。

repeatMatrix 对应的配置都可以使用 API 进行设置，例如：

chart.options({ type: 'repeatMatrix', data: [1, 2, 3], encode: { x: ['f1', 'f2', 'f3'] } });

encode

对于 repeatMatrix 有自己独特的 encode 通道。