版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。
特性
- 简单、易用
- 完备的可视化编码
- 强大的扩展能力
图表库常用术语
注：翻译语境针对图表库
「Axes 坐标轴」示例图:
axes.png
| 术语 | 释义 | 用途 |
|---|---|---|
| AXES | 坐标轴 | x 轴和 y 轴 |
| line | 坐标轴线 | |
| tickLine | 坐标轴刻度线 | 在 tickLine 上可以配置坐标轴刻度线的长短（length）、颜色（stroke）、粗细（lineWidth），或者控制它的展示（tickLine: null，不展示刻度线） |
| title | 标题 | 标题名默认为该轴对应数据字段的属性名，默认关闭 |
| grid | 网格线 | 默认情况下，G2 会为 y 坐标轴生成网格线，而 x 轴不展示网格线。网格线的配置属性名为 grid，只要为坐标轴配置 grid 属性即可展示网格线 |
| label | 坐标轴文本 | 可以设置宽度，颜色和虚线样式 |
| subTickLine | 坐标轴子刻度线 | 设置子刻度线样式 |
| subTickCount | 坐标轴子刻度数量 | 可以为两个主刻度间设置子刻度线的个数 |
「Legend 图例」示例图:
legend.png
| 术语 | 释义 | 用途 |
|---|---|---|
| LEGEND | 图例（文学影视中译作「传奇」） | 图表的辅助元素，使用颜色、大小、形状区分不同的数据类型，用于图表中数据的筛选 |
| shape 属性 | 形状 | 会根据不同的 shape 类型生成图例 |
| color 属性 | 颜色 | 会赋予不同的图例项不同的颜色来区分图形 |
| size 属性 | 大小 | 在图例上显示图形的大小 |
各个图例项样式设置
| 属性名 | 解释 | 默认值 |
|---|---|---|
| allowAllCanceled | (分类图例)是否保留一项不能取消勾选，默认为 false，即最后一项不能取消勾选 | false |
| unCheckColor | 未选中时 marker 的颜色 | '#bfbfbf' |
| textStyle | 图例项文本的样式配置 | {fill: '#3c3c3c'} |
| itemWidth | 图例项的宽度，当图例有很多图例项，并且用户想要这些图例项在同一平面内垂直对齐，此时这个属性可帮用户实现此效果 | -- |
| itemFormatter | 用于格式化图例每项的文本显示，是个回调函数 | -- |
「GEOM 几何标记」示例图:
geom.png
| 术语 | 释义 | 用途 |
|---|---|---|
| GEOM | 几何标记 Geometry(几何学, 几何图形) | 点、线、面这些几何图形，不同的几何标记都包含对应的图形属性 |
| point | 点图、折线图中的点 | 点的形状有很多，也可以使用图片代表点（气泡图），同时点也可以在不同坐标系下显示，所以可以扩展出非常多的图表类型。 |
| path | 路径图，地图上的路径 | 路径图是无序的线图。 |
| line | 折线图、曲线图、阶梯线图 | 在极坐标系下可以转换成雷达图。 |
| area | 区域图（面积图）、层叠区域图、区间区域图 | 极坐标系下可用于绘制雷达区域图。 |
| interval | 柱状图、直方图、南丁格尔玫瑰图、饼图、条形环图（玉缺图）、漏斗图等 | 通过坐标系的转置、变化，可以生成各种常见的图表类型；所有的图表都可以进行层叠、分组。 |
| polygon | 色块图（像素图）、热力图、地图 | 多个点可以构成多边形。 |
| schema | k 线图，箱型图 | 自定义的图表类型。 |
| edge | 树图、流程图、关系图 | 与点一起构建关系图。 |
| heatmap | 热力图 | -- |
| Tooltip | 提示信息 | 以提示框的形式显示当前点对应的数据的信息，比如该点的值，数据单位等 |
| Guide | 辅助标记 | 当需要在图表上绘制一些辅助线、辅助框或者图片时，比如增加平均值线、最高值线或者标示明显的范围区域时，可以使用辅助标记 |
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,
});
下面以浏览器引入为例开发图表：
- 首先准备一个容器
<div id="c1"></div>
让其在页面居中
body {
width: 100%;
}
#c1 {
width: 1000px;
margin: 100px auto;
height: 600px;
overflow: auto;
text-align: left;
}
- 准备数据
// 游戏销量统计数据
// 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 },
];
- 创建 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
- 改变几何标记 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
网友评论