groupY

groupX

jitter

属性	描述	类型	默认值
[channel]	输出到具体 mark 的 channel 数据的聚合方式	`Reducer`

属性

描述

类型

默认值

[channel]

输出到具体 mark 的 channel 数据的聚合方式

Reducer

示例

例如，在对应的 mark 中有 transform 方法可以使用数据的变换。那么我们可以使用 groupY 来对数据进行分组聚合。下面的示例中，我们将对 y 通道进行分组，并计算每个组的最小值和最大值。

(() => {
  const chart = new G2.Chart();
  chart.options({
    type: 'view',
    height: 180,
    paddingLeft: 80,
    data: {
      type: 'fetch',
      value: 'https://assets.antv.antgroup.com/g2/penguins.json',
      transform: [
        {
          type: 'map',
          callback: (d) => ({
            ...d,
            body_mass_g: +d.body_mass_g,
          }),
        },
      ],
    },
    children: [
      {
        type: 'point',
        encode: { x: 'body_mass_g', y: 'species' },
        style: { stroke: '#000' },
      },
      {
        type: 'link',
        encode: { x: 'body_mass_g', y: 'species' },
        transform: [{ type: 'groupY', x: 'min', x1: 'max' }],
        style: { stroke: '#000' },
      },
      {
        type: 'point',
        encode: { y: 'species', x: 'body_mass_g', shape: 'line', size: 12 },
        transform: [{ type: 'groupY', x: 'median' }],
        style: { stroke: 'red' },
      },
    ],
  });

  chart.render();
  return chart.getContainer();
})();

说明：

在这个示例中，我们首先定义了一组企鹅数据 data，包含企鹅的体重和物种;

在上述代码中，transform 方法中使用了 groupY 类型的数据转换，按 y channel 对数据进行分组;

分组后，数据会按照 y channel 的值进行聚合，计算出每个 species 的 body_mass_g 最小值和最大值;

最后通过 encode 方法将分组后的数据映射到图表的 x 和 y 轴上进行渲染。

groupY

配置项

示例