G2

G2 是一个简洁的渐进式语法，主要用于制作基于网页的可视化。它提供了一套函数风格式、声明形式的 API 和组件化的编程范式，希望能帮助用户能快速完成报表搭建、数据探索、可视化叙事等多样化的需求。

这篇文章将给大家简单介绍一下 G2 的核心概念：

标记（Mark）：绘制数据驱动的图形
转换（Transform）：派生数据
比例尺（Scale）：将抽象的数据映射为视觉数据
坐标系（Coordinate）：对空间通道应用点变换
视图复合（Composition）：管理和增强视图
动画（Animation）：数据驱动的动画和连续的形变动画
交互（Interaction）：操作视图并且展现详细信息

"Talk is cheap, show me the code"，那么接下来看看基于下面这个简单的数据集，G2 能做出什么可视化效果。

table({
  url: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
});

提示

在 G2 官网的文档中，特定代码块会挂载其返回的 DOM，并在网页中展示。

(() => {
  const chart = new G2.Chart();
  // ...
  return chart.getContainer(); // 挂载图表的容器
})();

这是在 G2 官网特定运行环境的语法，在实际项目中使用 G2 请参考快速上手。

标记（Mark）

标记是 G2 中最小的视觉单元，G2 中的所有图表都是由不同标记构成的。

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

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

chart.options({
  type: 'point',
  data: {
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
  },
  encode: { x: 'weight', y: 'height', color: 'gender' },
});

chart.render();

转换（Transform）

转换会改变数据和标记的展现形式，多用于数据分析。

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

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

chart.options({
  type: 'rect',
  data: {
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
  },
  encode: { x: 'height', color: 'gender' },
  transform: [{ type: 'binX', y: 'count' }, { type: 'stackY' }],
  style: { insetLeft: 1 },
});

chart.render();

比例尺（Scale）

比例尺用于控制标记的视觉样式。

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

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

chart.options({
  type: 'rect',
  data: {
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
  },
  encode: { x: 'height', color: 'gender' },
  transform: [{ type: 'binX', y: 'count' }, { type: 'stackY' }],
  scale: { color: { range: ['steelblue', 'orange'] }, y: { nice: true } },
  style: { insetLeft: 1 },
});

chart.render();

坐标系（Coordinate）

坐标系会改变图表的展示形式。

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

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

chart.options({
  type: 'rect',
  data: {
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
  },
  encode: { x: 'height', color: 'gender' },
  transform: [{ type: 'binX', y: 'count' }, { type: 'stackY' }],
  scale: { color: { range: ['steelblue', 'orange'] }, y: { type: 'sqrt', nice: true } },
  coordinate: { type: 'polar' },
  axis: { y: { title: false } },
  style: { insetLeft: 1 },
});

chart.render();

视图复合（Composition）

视图复合用于制作多视图图表。

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

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

chart.options({
  type: 'facetRect',
  data: {
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
  },
  encode: { y: 'gender' },
  children: [
    {
      type: 'rect',
      encode: { x: 'height', color: 'gender' },
      transform: [{ type: 'binX', y: 'count' }, { type: 'stackY' }],
      scale: { y: { nice: true } },
      frame: false,
      style: { insetLeft: 1 },
    },
  ],
});

chart.render();

动画（Animation）

动画支持分组动画和关键帧动画。可以点击左边的运行按钮看效果。

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

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

chart.options({
  type: 'rect',
  data: {
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
  },
  encode: { x: 'height', color: 'gender', enterDuration: 1000 },
  transform: [
    { type: 'stackEnter', groupBy: ['color'] },
    { type: 'binX', y: 'count' },
    { type: 'stackY' },
  ],
  style: { insetLeft: 1 },
});

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,
    });

    chart.options({
      type: 'timingKeyframe',
      direction: 'alternate',
      iterationCount: 4,
      children: [
        {
          type: 'interval',
          padding: 'auto',
          data,
          encode: { x: 'gender', color: 'gender', key: 'gender' },
          transform: [{ type: 'groupX', y: 'count' }],
        },
        {
          type: 'point',
          padding: 'auto',
          data,
          encode: {
            x: 'weight',
            y: 'height',
            color: 'gender',
            groupKey: 'gender',
            shape: 'point',
          },
        },
      ],
    });

    chart.render();
  });

交互（Interaction）

交互可以按需探索数据。

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

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

chart.options({
  type: 'point',
  data: {
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
  },
  encode: { x: 'weight', y: 'height', color: 'gender', shape: 'point' },
  style: {
    fillOpacity: 0.7,
    transform: 'scale(1, 1)',
    transformOrigin: 'center center',
  },
  state: {
    inactive: {
      fill: 'black',
      fillOpacity: 0.5,
      transform: 'scale(0.5, 0.5)',
    },
  },
  interaction: { brushXHighlight: true },
});

chart.render();

标记（Mark）

标记是 G2 中最小的视觉单元，G2 中的所有图表都是由不同标记构成的。

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

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

chart.options({
  type: 'point',
  data: {
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
  },
  encode: { x: 'weight', y: 'height', color: 'gender' },
});

chart.render();

转换（Transform）

转换会改变数据和标记的展现形式，多用于数据分析。

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

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

chart.options({
  type: 'rect',
  data: {
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
  },
  encode: { x: 'height', color: 'gender' },
  transform: [{ type: 'binX', y: 'count' }, { type: 'stackY' }],
  style: { insetLeft: 1 },
});

chart.render();

比例尺（Scale）

比例尺用于控制标记的视觉样式。

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

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

chart.options({
  type: 'rect',
  data: {
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
  },
  encode: { x: 'height', color: 'gender' },
  transform: [{ type: 'binX', y: 'count' }, { type: 'stackY' }],
  scale: { color: { range: ['steelblue', 'orange'] }, y: { nice: true } },
  style: { insetLeft: 1 },
});

chart.render();

坐标系（Coordinate）

坐标系会改变图表的展示形式。

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

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

chart.options({
  type: 'rect',
  data: {
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
  },
  encode: { x: 'height', color: 'gender' },
  transform: [{ type: 'binX', y: 'count' }, { type: 'stackY' }],
  scale: { color: { range: ['steelblue', 'orange'] }, y: { type: 'sqrt', nice: true } },
  coordinate: { type: 'polar' },
  axis: { y: { title: false } },
  style: { insetLeft: 1 },
});

chart.render();

视图复合（Composition）

视图复合用于制作多视图图表。

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

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

chart.options({
  type: 'facetRect',
  data: {
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
  },
  encode: { y: 'gender' },
  children: [
    {
      type: 'rect',
      encode: { x: 'height', color: 'gender' },
      transform: [{ type: 'binX', y: 'count' }, { type: 'stackY' }],
      scale: { y: { nice: true } },
      frame: false,
      style: { insetLeft: 1 },
    },
  ],
});

chart.render();

动画（Animation）

动画支持分组动画和关键帧动画。可以点击左边的运行按钮看效果。

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

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

chart.options({
  type: 'rect',
  data: {
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
  },
  encode: { x: 'height', color: 'gender', enterDuration: 1000 },
  transform: [
    { type: 'stackEnter', groupBy: ['color'] },
    { type: 'binX', y: 'count' },
    { type: 'stackY' },
  ],
  style: { insetLeft: 1 },
});

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,
    });

    chart.options({
      type: 'timingKeyframe',
      direction: 'alternate',
      iterationCount: 4,
      children: [
        {
          type: 'interval',
          padding: 'auto',
          data,
          encode: { x: 'gender', color: 'gender', key: 'gender' },
          transform: [{ type: 'groupX', y: 'count' }],
        },
        {
          type: 'point',
          padding: 'auto',
          data,
          encode: {
            x: 'weight',
            y: 'height',
            color: 'gender',
            groupKey: 'gender',
            shape: 'point',
          },
        },
      ],
    });

    chart.render();
  });

交互（Interaction）

交互可以按需探索数据。

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

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

chart.options({
  type: 'point',
  data: {
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
  },
  encode: { x: 'weight', y: 'height', color: 'gender', shape: 'point' },
  style: {
    fillOpacity: 0.7,
    transform: 'scale(1, 1)',
    transformOrigin: 'center center',
  },
  state: {
    inactive: {
      fill: 'black',
      fillOpacity: 0.5,
      transform: 'scale(0.5, 0.5)',
    },
  },
  interaction: { brushXHighlight: true },
});

chart.render();

G2

什么是 G2

G2

什么是 G2

提示

标记（Mark）

转换（Transform）

比例尺（Scale）

坐标系（Coordinate）

视图复合（Composition）

动画（Animation）

交互（Interaction）

更多能力

提示

标记（Mark）

转换（Transform）

比例尺（Scale）

坐标系（Coordinate）

视图复合（Composition）

动画（Animation）

交互（Interaction）

更多能力