版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。

特性

• 简单、易用
• 完备的可视化编码
• 强大的扩展能力

图表库常用术语

注：翻译语境针对图表库

「Axes 坐标轴」示例图:

axes.png

「Legend 图例」示例图:

legend.png

各个图例项样式设置

「GEOM 几何标记」示例图:

geom.png

G2 入门

笔记汇总入门重点，另附一个 Demo，实践自定义绘图中遇到的问题以及解决方法，以直观感受图表要素及其用用途。

1. 在框架中使用 G2

在 React 环境下使用 G2，官方推荐可以尝试使用 BizCharts 和 Viser-react！这两个产品都是基于 G2 的 React 版本封装，使用体验更符合 React 技术栈的习惯，他们都与 AntV 有着紧密的协同，他们很快也将同步开源和发布基于 G2 3.0 的版本。

此外，Viser 并不是针对 React 做的适配，它是对 G2 3.0 通用的抽象。通过基于 Viser 封装，现在已经支持对 React、 Angular 和 Vue 三个常用框架的深度整合，对应的是 viser-react、viser-ng 和 viser-vue。

BizCharts 地址：https://alibaba.github.io/BizCharts/
Viser 地址：https://viserjs.github.io/

2. 完整图表的组成要素:

• 坐标轴 AXES ( axis 的复数)
• 图例 LEGEND
• 几何标记 GEOM
• 提示信息 TOOLTIP
• 辅助标记 GUIDE

完整图表示例图:

g2.png

3. Step by Step 绘制基础图表

<a name="5c2pme"></a>

安装

<a name="mgcxqo"></a>

浏览器引入

既可以通过将脚本下载到本地也可以直接引入在线资源；

<!-- 引入在线资源 -->
<script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script>

<!-- 引入本地脚本 -->
<script src="./g2.js"></script>

通过 npm 安装

通过下面的命令即可完成安装

npm install @antv/g2 --save

成功安装完成之后，即可使用 import 或 require 进行引用。

import G2 from '@antv/g2';

const chart = new G2.Chart({
  container: 'c1',
  width: 600,
  height: 300,
});

下面以浏览器引入为例开发图表：

1. 首先准备一个容器

<div id="c1"></div>

让其在页面居中

body {
  width: 100%;
}
#c1 {
  width: 1000px;
  margin: 100px auto;
  height: 600px;
  overflow: auto;
  text-align: left;
}

2. 准备数据

// 游戏销量统计数据
// G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Fight', sold: 150 },
  { genre: 'Narration', sold: 23 },
  { genre: 'Race', sold: 223 },
  { genre: 'Advanture', sold: 57 },
  { genre: 'Puzzle', sold: 109 },
  { genre: 'Music', sold: 555 },
];

3. 创建 Chart 对象并绘图

// Step 1: 创建 Chart 对象
const chart = new G2.Chart({
  container: 'c1', // 指定图表容器 ID
  width: 1000, // 指定图表宽度, 单位 px
  height: 600, // 指定图表高度
});

// Step 2: 载入数据源
chart.source(data);

// Step 3: 创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
chart
  .interval()
  .position('genre*sold')
  .color('genre');

//Final: 绘制渲染图形
chart.render();

效果图 1：

demo1.png

4. 改变几何标记 Shape(形状)

上面的翻译列表中列举过「GEOM 几何标记」的三大类型: line, interval 和 piont (具体含义参考上文).

下面试着将 shape 改成 point:

// 所有 point 类型的 shape 样式列表
const shapes = [
  'circle',
  'square',
  'bowtie',
  'diamond',
  'hexagon',
  'triangle',
  'triangle-down',
  'hollowCircle',
  'hollowSquare',
  'hollowBowtie',
  'hollowDiamond',
  'hollowHexagon',
  'hollowTriangle',
  'hollowTriangle-down',
  'cross',
  'tick',
  'plus',
  'hyphen',
  'line',
];

chart
  .point()
  .position('genre*sold')
  .color('genre')
  .shape(shapes[4]) // 从 shapes 数组中取出样式
  .size('sold', [1, 50]); // 根据 data 中有 Number 值的字段定义大小，后面的参数是范围

demo2.png

发现右下角的「Legend 图例」莫名少了一小截，调整代码如下：

chart.legend({
  offset: 40, // 让图例向上位移
});

demo3.png

传送门