AntV入门

本文记录的是我在 AntV 的学习经历，AntV 分为 G2 和 G6，G2 是一个语义化图表生成工具，G6 是一个关系图基础技术框架，下面我将对 AntV 这两部分的使用进行简单的介绍。

不同类型的数据如何选用合适的图展示

图表用法

柱状图

柱状图有别于直方图，柱状图无法显示数据在一个区间内的连续变化趋势。柱状图描述的是分类数据，回答的是每一个分类中“有多少？”这个问题。

纵向柱状图

横向柱状图（条形图）

分类太多不适合使用纵向柱状图，使用横向柱状图，文本可以横向排布，便于用户的阅读

不适合表示趋势，随着有序的时间变化的数值趋势，更适合使用折线图或者区域图

柱状图与其他图表的对比

柱状图和折线图、饼图

柱状图主要用于多个分类间的数据（大小、数值）的对比
折线图主要用于展示连续数值（例如时间）或者有序分类的变化趋势
饼图主要是展示分类之间的占比情况

柱状图和南丁格尔图（玫瑰图）

南丁格尔图（玫瑰图）通过半径的大小来对比数据
柱状图根据矩形的长度来对比数据

双向柱状图

适合的场景：正反分类数据对比

双向柱状图不适合不含相反含义的数据

双向柱状图与其他图表的对比

双向柱状图和柱状图

柱状图只能绘制在同一个坐标轴内，每个柱子只能表示一个数据
双向柱状图包含正向和反向两个坐标轴，每个柱子可以表示一个正向数据和一个反向数据

分组柱状图

分组柱状图，又叫聚合柱状图。当使用者需要在同一个轴上显示各个分类下不同的分组时，需要用到分组柱状图。

分组柱状图经常用于不同组间数据的比较，这些组都包含了相同分类的数据。

但是仍需要注意，避免分组中分类过多的情况，分类过多会导致分组中柱子过多过密，非常影响图表可读性。

适合的场景：对比不同分组内相同分类的大小，对比相同分组内不同分类的大小

不适合的场景：分组过多、分类过多

分组柱状图和其他图表的对比

分组柱状图和一般柱状图

分组柱状图可以增加一个维度，用于对比一组数据内不同分类的数据值大小，可以表示3个数据字段（维度）的数据，而一般柱状图只能表示 2 个数据字段（维度）
分组柱状图的柱子较多，所以能展示的分组较少

分组柱状图和层叠柱状图

分组柱状图，可以对比同一个分组内部不同分类的数据大小，也可以对比不同分组内相同分类的数据大小，但无法对比各分组的总量
层叠柱状图，可以对比同一个分组内部不同分类的数据大小或占比，也可以对比分组的总量，但不适合对比不同分组内相同分类的数据大小

层叠柱状图

与并排显示分类的分组柱状图不同，层叠柱状图将每个柱子进行分割以显示相同类型下各个数据的大小情况。它可以形象得展示一个大分类包含的每个小分类的数据，以及各个小分类的占比，显示的是单个项目与整体之间的关系。我们将层叠柱状图分为两种类型：

一般的层叠柱状图：每一根柱子上的值分别代表不同的数据大小，各层的数据总和代表整根柱子的高度。非常适用于比较每个分组的数据总量。
百分比的层叠柱状图：柱子的各个层代表的是该类别数据占该分组总体数据的百分比。

一般层叠柱状图

百分比柱状图

百分比层叠柱状图不适合的场景

对比不同分组内同个分类的数据大小
对比各分组总数的大小

层叠柱状图和其他图表的对比

层叠柱状图和一般柱状图

层叠柱状图可以增加一个维度，用于对比一组数据内不同分类的数据值大小，可以表示 3 个数据字段（维度）的数据
一般柱状图只能表示 2 个数据字段（维度）

层叠柱状图和层叠区域图

层叠柱状图主和层叠区域图都能表示3个维度的数据，
层叠柱状图用于表示2个分类数据字段， 1 个连续数据字段，主要展示分类之间的对比
层叠区域图用于表示1个分类字段， 2 个连续字段，主要展示在一个连续（有序）区间内不同分类大小（比例）的变化趋势。

层叠柱状图和分组柱状图

层叠柱状图和分组柱状图都可以对比同一个分组内部不同分类的数据大小，
分组柱状图，可以对比不同分组内相同分类的数据大小，但无法对比不同分组的总体数据大小
层叠柱状图，可以对比不同分组的总体数据大小，但不适合对比不同分组内相同分类的数据大小，因为不同分组内的相同分类处于不同的基准线上

色块图

色块图，由小色块有序且紧凑的组成的图表。色块图的最大好处是，2维画布上的空间利用率非常高。

另外，关于颜色的用法有两点需要强调一下：

如果是应对展示用的场景，数据量不大、颜色分类数量小于或等于7个，可以采用分类的颜色映射。
如果应对，分析相关的需求，为了更有效率的使用色块图，我们建议使用连续（渐变）的颜色映射数值。由于人眼对颜色的分辨力有限，所以用于编码的颜色不宜过多，我们推荐的颜色的数量在3～11个之间。

色块图与其他图表的对比

色块图和热力图

数据类型上看：热力图是用两个连续字段确定数值点的位置，色块图是用两个分类字段确定数值点的位置。
功能上看：热力图主要用于展示数据的分布情况，色块图在观察数据分布以外，还能进行列对比和行对比。

螺旋图

螺旋图有两大好处：

绘制大量数据：螺旋图节省空间，可用于显示大时间段数据的变化趋势；
绘制周期性数据：螺旋图每一圈的刻度差相同，当每一圈的刻度差是数据周期的倍数时，能够直观的表达数据的周期性。

直方图

直方图与其他图表的对比

直方图与柱状图

柱状图是以矩形的长度表示每一组的频数或数量，其宽度(表示类别)则是固定的，利于较小的数据集分析。
直方图是以矩形的长度表示每一组的频数或数量，宽度则表示各组的组距，因此其高度与宽度均有意义，利于展示大量数据集的统计结果。
由于分组数据具有连续性，直方图的各矩形通常是连续排列，而柱状图则是分开排列。

雷达图

传统的雷达图被认为是一种表现多维（4维以上）数据的图表。它将多个维度的数据量映射到坐标轴上，这些坐标轴起始于同一个圆心点，通常结束于圆周边缘，将同一组的点使用线连接起来就称为了雷达图。它可以将多维数据进行展示，但是点的相对位置和坐标轴之间的夹角是没有任何信息量的。在坐标轴设置恰当的情况下雷达图所围面积能表现出一些信息量。

雷达图还可以展示出数据集中各个变量的权重高低情况，非常适用于展示性能数据。

雷达图更注重于同类图表之间的对比（即雷达图与雷达图之间的对比）

南丁格尔玫瑰图

南丁格尔玫瑰图是在极坐标下绘制的柱状图，使用圆弧的半径长短表示数据的大小（数量的多少）。

由于半径和面积的关系是平方的关系，南丁格尔玫瑰图会将数据的比例大小夸大，尤其适合对比大小相近的数值。
由于圆形有周期的特性，所以玫瑰图也适用于表示一个周期内的时间概念，比如星期、月份。

适合的场景：对比不同分类的大小

不适合的场景：分类过少的场景、部分分类数值过小的场景

南丁格尔玫瑰图的扩展

扇形玫瑰图

层叠的玫瑰图

南丁格尔玫瑰图与其他图表的对比

南丁格尔玫瑰图与柱状图

南丁格尔玫瑰图本质上是柱状图在极坐标上的展示。
柱状图使用矩形的高度表示数值的大小
南丁格尔玫瑰图使用扇形的半径大小表示数值的大小。

南丁格尔玫瑰图与饼图

南丁格尔玫瑰图使用扇形的半径表示数值的大小，饼图使用扇形的弧度表示数据的大小。
南丁格尔玫瑰图可以同时表现的分类多于饼图。

层叠面积图

层叠面积图上的最大的面积代表了所有的数据量的总和，是一个整体。各个叠起来的面积表示各个数据量的大小，这些堆叠起来的面积图在表现大数据的总量分量的变化情况时格外有用，所以层叠面积图不适用于表示带有负值的数据集。非常适用于对比多变量随时间变化的情况。

该图并不能反映总量的变化，但是可以清晰的反应每个数值所占百分比随时间或类别变化的趋势线，对于分析自变量是大数据、时变数据、有序数据时各个指标分量占比极为有用。

适合场景：百分比层叠面积图

不适合的场景：分类数据的比较不要使用面积图。

与其他图表的对比

与面积图的对比

层叠面积图是一种特殊的面积图，都是表现数据在连续一段时间、一个数据区间内的趋势
层叠面积图侧重于表现不同时间段（数据区间）的多个分类累加值之间的趋势
百分比层叠面积图表现不同时间段（数据区间）的多个分类占比的变化趋势

与层叠柱状图的对比

层叠柱状图和层叠面积图都可以呈现不同分类的累加值
层叠柱状图和层叠面积图的差别在于，层叠面积图的x轴上只能表示连续数据（时间或者数值），层叠柱状图的x轴上只能表示分类数据

矩形树图

矩形树图的好处在于，相比起传统的树形结构图，矩形树图能更有效得利用空间，并且拥有展示占比的功能。矩形树图的缺点在于，当分类占比太小的时候文本会变得很难排布。相比起分叉树图，矩形树图的树形数据结构表达的不够直观、明确。

不适合的场景：没有权重关系，且需要明显展示层级关系，用分叉树图更合适

矩形树图与其他图表的对比

矩形树图和分叉树图（分叉树图介绍敬请期待）

矩形树图用于展示带权的数据，分叉树图用于展示不带权的数据
两个图表都用于展示层次数据，但是分叉树图展示的层次关系更清晰
矩形树图能更多的展现树形结构内部的占比关系，分叉树图没有这个能力

气泡图

气泡图是一种多变量图表，是散点图的变体，也可以认为是散点图和百分比区域图的组合。

气泡图通常用于比较和展示不同类别圆点（这里我们称为气泡）之间的关系，通过气泡的位置以及面积大小。从整体上看，气泡图可用于分析数据之间的相关性。

需要注意的是，气泡图的数据大小容量有限，气泡太多会使图表难以阅读。但是可以通过增加一些交互行为弥补：隐藏一些信息，当鼠标点击或者悬浮时显示，或者添加一个选项用于重组或者过滤分组类别。

另外，气泡的大小是映射到面积而不是半径或者直径绘制的。因为如果是基于半径或者直径的话，圆的大小不仅会呈指数级变化，而且还会导致视觉误差。

与地图的结合（Bubble Map）

气泡图的另一个广泛用途，就是气泡图与地图的结合，即带气泡的地图，来展示具有地域特征的数据。具体详见Bubble Map，这里只简单展示一个例子。

子弹图

适合的场景：显示阶段性数据信息

子弹图与其他图表的对比

子弹图和柱状图

柱状图主要用于多个分类间的数据（大小、数值）的对比
子弹图图主要用于分类各自的数值所处状态和与测量标记的对比，突出的是每个分类自身的情况，没有分类间的比较，用于展示各个分类的子弹图单元相对独立。

漏斗图

漏斗图适用于业务流程比较规范、周期长、环节多的单流程单向分析，漏斗图从上到下，有逻辑上的顺序关系，表现了随着业务流程的推进业务目标完成的情况。

适合的场景：适用于流程流量分析。随着流程的推进，每个环节所要达成的成功数量在减少。最终的成交量是企业想要达成的交易数量。通过将各个流程中数量的信息画入漏斗图可以清晰的分析到哪个环节是当前业务流程中的薄弱环节，哪个环节是流量转化的瓶颈

不适合的场景：漏斗图不适合表示无逻辑顺序的分类对比，如果要表示无逻辑顺序的分类对比情况，请使用柱状图。漏斗图也不适合表示占比情况，如果要表示占比情况，请使用饼图。

K 线图

适合场景：K 线图主要用于金融领域里展示股票，期货等交易数据

词云

词云，又称文字云，是文本数据的视觉表示，由词汇组成类似云的彩色图形，用于展示大量文本数据。通常用于描述网站上的关键字元数据（标签），或可视化自由格式文本。每个词的重要性以字体大小或颜色显示。词云的作用：

快速感知最突出的文字
快速定位按字母顺序排列的文字中相对突出的部分

适合的场景：对比大量文本

使用图片做边界限制结合图片可以绘制出特定形状的词云

不适合的场景：数据区分度不大、数据太少

词云与其他图表的对比

词云和柱状图

词云适合大量数据，柱状图适合少量数据
词云展示文字更为直观，柱状图需要借助坐标轴和刻度表示文字的分类和数据
词云可以映射更多分类字段在在文字样式上，柱状图只能映射一个分类字段在颜色上

G2

安装

浏览器引入

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

<!-- 引入在线资源 -->
<script src="https://a.alipayobjects.com/g/datavis/g2/2.3.5/g2.js"></script>
<!-- 引入本地脚本 -->
<script src="./g2.js"></script>

通过 npm 安装

1	npm install g2 --save

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

var G2 = require('g2');
var chart = new G2.Chart({
  id: 'c1',
  width: 600,
  height: 300
});

使用 G2

创建 div 图表容器

在页面的 body 部分创建一个 div，并制定必须的属性 id：

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

编写图表绘制代码

创建 div 容器后，我们就可以进行简单的图表绘制:

创建 Chart 图表对象，指定图表所在的容器 ID、指定图表的宽高、边距等信息；
载入图表数据源；
使用图形语法进行图表的绘制；
渲染图表。

整体例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>柱状图</title>
    <!-- 引入 G2 文件 -->
    <script src="https://a.alipayobjects.com/g/datavis/g2/2.3.5/g2.js"></script>
  </head>
  <body>
    <!-- 创建图表容器 -->
    <div id="c1"></div>
    <script>
      var data = [
        {genre: 'Sports', sold: 275},
        {genre: 'Strategy', sold: 115},
        {genre: 'Action', sold: 120},
        {genre: 'Shooter', sold: 350},
        {genre: 'Other', sold: 150},
      ]; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
      // Step 1: 创建 Chart 对象
      var chart = new G2.Chart({
        id: 'c1', // 指定图表容器 ID
        width : 600, // 指定图表宽度
        height : 300 // 指定图表高度
      });
      // Step 2: 载入数据源,定义列信息
      chart.source(data, {
        genre: {
          alias: '游戏种类' // 列定义，定义该属性显示的别名
        },
        sold: {
          alias: '销售量'
        }
      });
      // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
      chart.interval().position('genre*sold').color('genre')
      // Step 4: 渲染图表
      chart.render();
    </script>
  </body>
</html>

G2 图表的主要组成

观察最后绘制的图表的 dom 结构，你会发现其实它是由三层 canvas 构成的

这三层 canvas 分别对应 chart 对象的如下三个属性：

frontCanvas 最上层 canvas，图例 legend、提示信息 tooltip、和 text tag html 这三种类型的辅助标记 guide 在这一层绘制；
canvas 中间层，绘制图表的主体内容几何标记 geom；
backCanvas 最下层 canvas，坐标轴 axis 和 line image rect arc 这四种类型的辅助标记 guide 在这一层绘制。
通过 chart.get('frontCanvas') 方式即可获取这些 canvas 对象。

图表对象配置（chart）

图表容器

实例化 Chart 对象时，绑定 dom 容器的方式有两种：

传入 dom 容器的 id

var chart = new G2.Chart({
  id: 'c1',
  width: 1000,
  height: 500
});

传入 dom 容器的 html 节点对象

var chart = new G2.Chart({
  container: document.getElementById('c1'),
  width: 1000,
  height: 500
});

图表样式

图表的样式对图表样式进行配置时，需要设置 plotCfg 属性，该属性包含 border background margin 属性：

border：用于设置整个 chart 的图表背景样式，包括边框，背景色，透明度，圆角等;
background：用于设置 chart 绘图区域的背景样式，包括边框，背景色，透明度，圆角等；
margin：用于设置边距，用法同 CSS 中的 margin 属性相同, [上，右，下，左]

图表宽度自适应

默认情况下，G2 图表的宽度需要用户手动设置 width 参数，当需要图表跟随图表容器响应式时，则需要开启 forceFit 属性，默认其值为 false，开启方式如下：

var chart = new G2.Chart({
  id: 'c1',
  forceFit: true,
  height : 400
});

另外还可以手动得调用自适应函数 chart.forceFit() 来响应页面变化。

1	chart.forceFit(); // 手动调用自适应函数

图表动画

默认情况下，G2 的图表动画处于开启状态，可以通过如下两种方式关闭图表动画：

// 方式一： 设置 animate 属性
var chart = new G2.Chart({
  id: 'c1',
  width: 800,
  height : 400,
  animate: false // 关闭图表动画
});
// 方式二： 手动调用 animate 函数
chart.animate(false); // 关闭动画

data 数据

chart 对象支持两种数据载入的方式：

方式 1：data 属性传入

var chart = new G2.Chart({
id: 'c1',
width: 600,
height: 300,
data: [
{x: 'a', y: 1},
{x: 'b', y: 2},
...
]
});

方式 2：调用 chart.source(data) 方法

支持的数据格式

G2 支持两种格式的数据源：

JSON 数组
Frame 对象

如果数据源是 JSON 数组，G2 在内部会将其转换成一个 Frame 对象。

JSON 数组

var data = [
  {"gender":"男","count":40},
  {"gender":"女","count":30}
];

Frame 对象

G2 的图表设置数据源后，在内部都会把数据转换成 Frame 对象，我们称之为数据集合，其是 JSON 数组的每条记录进行列合并的结果。

Frame 对象的格式如下：

{
  names: array, // 源数据中所有数据属性的集合。
  arr: array, // 一个二维数组，同 names 元素顺序对应，存储每个数据属性对应的数据值。
  data: array, // 存储原始 JSON 数组。
}

上面的 JSON 数组转换为 Frame 对象后，结构如下表格所示：

Frame 常见操作

创建 Frame

通过 G2.Frame 来获取 Frame 对象。

Example:

var data = [
  {gender:'男',count:40},
  {gender:'女',count:30}
];
var Frame = G2.Frame;
var frame = new Frame(data); // 将 data 转换为 Frame 对象
console.log(frame); // {data: Array[2], names: Array[2], arr: Array[2]}

我们为 Frame (数据集合)对象封装了大量的数据操作方法，基本上都是列操作，方便用户快捷得对数据进行增删查改。

一旦对Frame对象进行操作后，data中的数据跟Frame对象不一致，arr中的数据是一个个的数组不方便查看，所以Frame 提供了格式化函数 .s()

var data = [
  {gender:'男',count:40},
  {gender:'女',count:30}
];
var Frame = G2.Frame;
var frame = new Frame(data); // 将 data 转换为 Frame 对象
console.log(frame.s());
/** 结果
"gender count
男 40
女 30"
 */

度量

度量 Scale，是数据空间到图形空间的转换桥梁，负责原始数据到 [0, 1] 区间数值的相互转换工作，从原始数据到 [0, 1] 区间的转换我们称之为归一化操作。

不同的数据类型对应不同的度量，如

连续数据类型，如 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 一组数据，在其原始数值范围 [0, 10] 内通过度量转换至 [0, 1] 范围的数据，变成 0, 0.1, 0.2, ..., 0.9, 1，同时通过 invert反转，还需要度量后的数值恢复至原始值；
分类数据类型，如 ['男', '女'] 这一组数据，通过度量转换后变成 [0, 1]，同样时通过 invert 反转可恢复至原始值。

在 G2 中度量用于完成以下功能：

将数据转换到 [0, 1] 范围内，方便将数据映射到位置、颜色、大小等图形属性；
将归一化后的数据反转回原始值。例如分类a 转换成 0.2，那么对应 0.2 需要反转回分类a；
划分数据，用于在坐标轴、图例显示数值的范围、分类等信息。

G2 提供了不同的度量类型

对于 G2 生成的所有度量对象，均拥有以下属性，这些属性均可以由用户进行配置。

{
  type: string, // 度量的类型
  range: array, // 数值范围区间，即度量转换的范围，默认为 [0, 1]
  alias: string, // 为数据属性定义别名，用于图例、坐标轴、tooltip 的个性化显示
  ticks: array, // 存储坐标轴上的刻度点文本信息
  tickCount: number, // 坐标轴上刻度点的个数，不同的度量类型对应不同的默认值
  formatter: function, // 回调函数，用于格式化坐标轴刻度点的文本显示，会影响数据在坐标轴、图例、tooltip 上的显示
}

列定义操作（指定度量）

所谓的列定义，即是对度量 scale 的操作。

G2 提供了两种列定义操作方式：

chart.source(data, defs); 用于多个数据字段的列定义。
chart.col('dim', defs); 用于一个字段的列定义，该方法会覆盖 chart.source() 中定义的对应字段的列定义且必须先于图形语法语句（chart.<geomType>.position()...）进行声明。

geom 几何标记(图表类型)

创建好 chart 对象之后，就可以通过如下方式选择几何标记的类型：

1	chart.point().xx().xx(); // 这里使用了 point 类型的 geom

attr 图形属性

图形属性对应视觉编码中的视觉通道，是 G2 语法元素非常重要和灵活的一部分，不同的几何标记拥有自己的图形属性。G2 中支持的视觉通道有下面几种：

position，位置，二维坐标系内映射至 x 轴、y 轴，三维坐标系可以映射到 x 轴、y 轴、z 轴;
color，颜色，包含了色调、饱和度和亮度；
size，大小，不同的几何标记对大小的定义有差异；
shape，形状，几何标记的形状决定了某个具体图表类型的表现形式，例如点图，可以使用圆点、三角形、图片表示；线图可以有折线、曲线、点线等表现形式；
opacity，透明度，图形的透明度，这个属性从某种意义上来说可以使用颜色代替，需要使用 ‘rgba’ 的形式，所以在 G2 中我们独立出来。

coord 坐标系

G2 包含了 8 种不同的坐标系，目前所有的坐标系均是 2 维的。

G2 默认提供的坐标系类型为笛卡尔坐标系，当不满足用户需求时，可以通过调用下面的语法声明需要使用的坐标系：

1	chart.coord('coordType'[, cfg]);

axis 坐标轴

G2 生成的坐标轴由如下五部分组成：

标题 title
坐标轴线 line
文本 labels
刻度线 tickLine
网格 grid

legend 图例

图例（legend）是图表的辅助元素，使用颜色、大小、形状区分不同的数据类型，用于图表中数据的筛选。G2 会根据设置图形属性映射以及数据的类型自动生成不同的图例。

shape, color, size 这三个图形属性如果判断接收的参数是数据源的字段时，会自动生成不同的图例；

shape 属性，会根据不同的 shape 类型生成图例；
color 属性, 会赋予不同的图例项不同的颜色来区分图形；
size 属性, 在图例上显示图形的大小。

通过 chart.legend([dim, ]false) 可以关闭图例。

提示信息(tooltip)，是指当鼠标悬停在图标上的某点时，以框的形式提示该点的数据，比如该点的值，数据单位等。tooltip 内显示的信息完全可以通过格式化函数动态指定；通过调用 chart.tooltip(false) 即可不启用提示信息功能。

guide 辅助标记

G2 目前支持 6 种辅助标记类型：

辅助线，例如表示平均值或者预期分布的直线；
辅助图片，在图表上添加辅助图片；
辅助文本，指定位置添加文本说明；
辅助框，框选一段图区，设置背景、边框等；
辅助标签(tag)，包含文本标识和辅助线的辅助标记，会从目标到说明文本之间绘制一条线；
辅助 html，指定位置添加自定义html，显示自定义信息。

stat 统计变换

根据对数据的处理方式的不同，G2 中提供了以下几种统计变换函数：

传统统计函数

summary：汇总统计，主要计算数据集合的最大值、最小值、平均数等；
bin：封箱统计，将数据划分成一个个的区域，然后在外面嵌套汇总统计；
smooth：线性回归、非线性回归以及各种平滑插值算法，用于查找数据的规律；
density：样本估计总体的概率密度；
region：计算数值区间，误差区间等；

数据变换函数

map：用于地图的绘制计算；
treemap：用于矩阵树图的绘制计算。
link：用于计算关系图中边的坐标。

分面，将一份数据按照某个维度分隔成若干子集，然后创建一个图表的矩阵，将每一个数据子集绘制到图形矩阵的窗格中，所有子图采用相同的图表类型，并进行了一定的设计，使得它们之间方便进行比较。

总结起来，分面其实提供了两个功能：

按照指定的维度划分数据集；
对图表进行排版。

theme 图表样式

G2 默认提供了三种图表主题： default、dark、cheery。

label 文本标签

恰当的文本标注可以提高可视化图表的可读性。除了提供文本标签标注的功能之外，G2 还支持文本的格式化以及自定义 html 文本标签的功能。

在每个几何标记 geom 上调用 label 方法，指定需要显示的数据维度即可

图表事件 event

G2 中的事件用法如下：

1 2	chart.on('eventType', fn); // 绑定事件 chart.off('eventType', fn); // 移除事件

其中 eventType 对应时间名称，均使用小写。

对于事件的移除，chart.off('eventType', fn) 其中如果 fn 不指定，表示删除所有 eventType 事件，如果 eventType 和 fn 都不指定，则表示删除 chart 上所有的事件。

目前 G2 提供的事件可以分为三种：

图表坐标系内的事件：

plotmove、plotenter、plotleave、plotclick、plotdblclick、rangeselectstart、rangeselectend
图形元素上的事件：itemselected、itemunselected、itemselectedchange
tooltip 上的事件：tooltipchange、tooltipshow、tooltiphide

图表交互

各个几何标记 geom 选中的模式包含如下三种：

不可选中；
单选；
多选。

图表框选交互

默认框选的功能是关闭的，通过调用如下方法开启和关闭框选功能：

1 2	chart.setMode('select'); // 开启框选模式 chart.setMode(false); // 关闭

目前我们提供了如下三种框选交互形式：

1
2
3

chart.select('rangeX'); // 使用 X 轴范围的框选
chart.selcet('rangeY'); // 使用 Y 轴范围的框选
chart.select('rangeXY'); // 使用 X 和 Y 轴的框选

数据异步加载与动态更新

有时候我们需要先绘制图表，然后再加载完整的数据，即刚开始的时候数据源是个空的。

当数据加载进来之后，再调用 chart.changeData(data); 即可绘制。

数据滑动条插件使用

在 react 中使用 G2

G2 高级教程

为了更好地在 react 组件中使用 G2，我们封装了 g2-react 组件。

具体的封装形式可查看源码： https://github.com/antvis/g2-react/blob/master/src/index.js

层叠图

G2 默认提供了如下 8 种几何标记和数据调整组合，直接通过如下代码即可调用：

1	chart.intervalStack().position('x*y');

使用 G2 绘制词云

词云，又称文字云，由词汇组成类似云的彩色图形，用于展示大量文本数据。

G6

G6 是一个由纯 JavaScript 编写的关系图基础技术框架。开发者能基于 G6 进行关系图的查看视图和编辑视图进行快速的二次开发

图

图 Graph 是所有上层图类的基类，如：Net 网、 Tree 树，都继承于Graph。与以往不同，1.0 后，Graph 已沉为一个抽象类(Abstract)，只实现了基础的功能，定义了接口规范，用户可基于 Graph 进行拓展，但不能直接用于画关系图。以后 G6 里还要容纳更多的关系图如 UML、Flow、Force都将基于 Graph

网

网图 Net 是 G6 提供的、可用于直接画关系图的、最基础的图类。它不仅能画由一组nodes、edges，确定的关系图，还集成了，如：拖拽节点（dragNode）、拖拽画布（dragCanvas）、拖拽边（dragEdge）、节点变形（resizeNode）等等，一系列的基础的编辑交互模式，用户可以比较方便的基于该类，绘制做一个关系图的展示视图或图编辑器。

树

数据

在使用关系图开发的过程中，我们常常需要导出导入数据，以满足关系图的存储、分享、编辑的功能。 G6 1.0 后，我们对这部分的需求做了总结。在 Graph 定义了一对相互对照的接口，read <==> save，后面用户应该严格通过这两个该接口导入导出数据。

事件 – event

G6 封装了一套基础的鼠标事件。通过 graph.on() 绑定，graph.off() 解除。

行为 – behaviour

行为由事件组成，所描述的交互，比事件更具体，如拖动节点（dragNode），滚轮缩放画布（wheelZoom），拖动画布（dragCanvas）。用户可以根据自己的需要选择对应的行为。

行为列表详见：Handle API

模式 – mode

大多数行为可以随意相互组合，也有部分行为之间有可能发生矛盾，比如拖动画布（dragCanvas）行为和多选行为（multiSelect），这个时候需要用户自己维护各种行为集合组成模式，比如拖拽模式（drag），编辑模式（edit），以便管理、切换。

参考

AntV 官网