共计 2794 个字符，预计需要花费 7 分钟才能阅读完成。
Antv 蚂蚁金福提供的数据可视化解决方案，是一系列的解决方案的汇合，蕴含 G2、G6、F2、L7 以及一套残缺的图表应用和设计规范。因为有大厂反对，AntV 迭代稳固，文档和示例十分的齐全，这次因为业务需要的起因应用到了 AntV G2 数据可视化引擎，所以想记录下本人应用和学习的心得。
G2 一套面向惯例统计图表，以数据驱动的高交互可视化图形语法，具备高度的易用性和扩展性。应用 G2，你能够无需关注图表各种繁琐的实现细节，一条语句即可应用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。
G2 应用
npm 装置
npm install @antv/g2 --save
上面将 G2 根底折线图 作为示例代码剖析(G2@4.0 版本):
| import {Chart} from '@antv/g2'; | |
| const data = [{ year: '1991', value: 3}, | |
| {year: '1992', value: 4}, | |
| {year: '1993', value: 3.5}, | |
| {year: '1994', value: 5}, | |
| {year: '1995', value: 4.9}, | |
| {year: '1996', value: 6}, | |
| {year: '1997', value: 7}, | |
| {year: '1998', value: 9}, | |
| {year: '1999', value: 13}, | |
| ]; | |
| // 初始化, 指定容器 DOM id、高度 | |
| const chart = new Chart({ | |
| container: 'container', | |
| autoFit: true, | |
| height: 500, | |
| }); | |
| // data 数据 | |
| chart.data(data); | |
| // scale 度量配置, 生成坐标轴刻度值 | |
| chart.scale({ | |
| year: {range: [0, 1], | |
| }, | |
| value: { | |
| min: 0, | |
| nice: true, | |
| }, | |
| }); | |
| // tooltip 提示信息，是指当鼠标悬停在图形上时，以提示框的模式展现该点的数据 | |
| chart.tooltip({ | |
| showCrosshairs: true, // 展现 Tooltip 辅助线 | |
| shared: true, | |
| }); | |
| // 几何图形 Geometry; | |
| // 应用 line 绘制折线图 | |
| // 应用 position 通道将对应的变量映射到 x 和 y 地位空间上；// 应用 label 展现 value 值；chart.line().position('year*value').label('value'); | |
| // 应用 point 绘制点 | |
| // 应用 position 将对应的变量映射到 x 和 y 地位空间上；chart.point().position('year*value'); | |
| // 渲染 | |
| chart.render(); |
以上代码取自官网示例代码，Antv G2 根底折线图。会发现 G2 图表调用是通过函数链式调用来实现，绝对于 Echart，我集体感觉 G2 这样的开发流程绝对的棘手，应用办法感觉比拟舒服。（不分前端框架，应用起来都很香）。
以上只是拿折线图作为示例，大抵阐明了一下创立 G2 图表的大抵调用过程。当然 G2 也是反对其余类型的图表。上面就以我应用过的饼状图、柱状图作为例子，来梳理一下 G2 应用的大抵脉络。
G2 饼状图 / 柱状图
上面的例子中不会呈现 data 数据变量，相干的理论图表能够参考实现示例代码
| ## 饼状图，残缺示例参考：https://g2.antv.vision/zh/examples/pie/basic#labelline | |
| const chart = new window.G2.Chart({ | |
| container: domID, | |
| forceFit: true, | |
| height: 210, | |
| width: 230 | |
| }); | |
| chart.data(data); | |
| // coordinate 坐标系 | |
| // theta：一种非凡的极坐标系，半径长度固定，仅仅将数据映射到角度，罕用于饼图的绘制；chart.coordinate('theta'); | |
| // tooltip 提醒 | |
| // 不展现提醒题目；chart.tooltip({showTitle: false}); | |
| // 几何图形 Geometry | |
| // 应用 interval 绘制饼图；// 应用 position 通道 将对应的变量映射 percent 上；// 应用 color 通道 依据 item 字段的数据值进行色彩的映射；// 应用 adjust 调整数据 将同一个分类的数据值累加起来；chart.interval().position('percent').color('item').adjust('stack'); | |
| // legend 图例 | |
| // 不展现图例; | |
| chart.legend(false); | |
| chart.render(); |
几何图形 GeometryAPI——interval用于 绘制柱状图、直方图、南丁格尔玫瑰图、饼图、条形环图（玉缺图）、漏斗图 等，而 position、color 均是 几何图形 Geometry 的通道映射规定。
图例 legend、提醒 tooltip、坐标系 coordinate、数据 data均是独自管制图表。
| ## 柱状图，残缺示例参考：https://g2.antv.vision/zh/examples/column/basic#basic | |
| const chart = new window.G2.Chart({ | |
| container: domID, | |
| autoFit: true, | |
| height: 200, | |
| width: 400 | |
| }); | |
| chart.data(data1); | |
| // scale 度量 | |
| // num 是 y 轴的值，nice=true 是主动调整 y 轴刻度 | |
| chart.scale('num', {nice: true}); | |
| chart.tooltip({showMarkers: false}); | |
| // interaction 交互 | |
| // 鼠标在画布上挪动是，对应的区域呈现背景框 | |
| chart.interaction('active-region'); | |
| // 几何图形 Geometry | |
| // 应用 interval 绘制柱状图；chart.interval().position('gydw_mc*num'); | |
| chart.render(); |
下面呈现新的办法 交互 interaction用来调整图表与用户的交互展现。
几何图形 Geometry—— line、point、interval（绘制线、点、饼 / 柱图）等数据 data度量 scale图例 legend提醒 tooltip交互 interaction坐标系 coordinate
这些是在例子中呈现的办法，如果依照官网的介绍，以上就是 G2 图表中的基类，当然，下面只蕴含局部，还有其余基类，如 坐标轴 Axis、滚动条 Scrollbar… 等。
window.G2.Chart创立图表之后，即可通过图表实例，调用相干的基类办法，对图表进行定制化，最初 render 渲染即可。对于不同的配置，只须要找到相干基类属性办法即可。只有理解了相干基类配置，对于图表的应用也会相当棘手。
参考：
Antd G2 官网文档
书栈网：G2 4.x 官网教程
