简介

为了更好得使用 G2 进行数据可视化，我们需要了解 G2 图表的组成以及相关概念。 完整的 G2 图表组成如下图所示：

坐标轴 axis

通常包含两个坐标轴，在笛卡尔坐标系下，分别为 x 轴和 y 轴，在极坐标轴下，则分别由角度和半径2个维度构成。 每个坐标轴由坐标轴线、刻度线、刻度文本、标题以及网格线组成。

图例 legend

图例作为图表的辅助元素，用于标定不同的数据类型以及数据的范围，用于辅助阅读图表，帮助用户在图表中进行数据的筛选过滤。

几何标记 geom

几何标记，即我们所说的点、线、面这些几何图形，在 G2 中几何标记的类型决定了生成图表的类型。也就是数据被可视化后的实际表现，不同的几何标都对应自己能识别的图形属性。

G2 的核心既是将数据从数据空间转换到图形空间。

提示信息 tooltip

当鼠标悬停在某个点上时，会以框的形式显示当前点对应的数据的信息，比如该点的值，数据单位等。数据提示框内提示的信息还可以通过格式化函数动态指定。

辅助标记 guide

当需要在图表上绘制一些辅助线、辅助框或者图片时，比如增加平均值线、最高值线或者标示明显的范围区域时，可以使用辅助标记 guide。

其他

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

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

1. frontCanvas 最上层 canvas，图例 legend、提示信息 tooltip、和 text tag html 这三种类型的辅助标记 guide 在这一层绘制；
2. canvas 中间层，绘制图表的主体内容几何标记 geom；
3. backCanvas 最下层 canvas，坐标轴 axis 和 line image rect arc 这四种类型的辅助标记 guide 在这一层绘制。

通过 chart.get('frontCanvas') 方式即可获取这些 canvas 对象。