Antv 蚂蚁金福提供的数据可视化解决方案,是一系列的解决方案的集合,包含 G2、G6、F2、L7 以及一套完整的图表使用和设计规范。由于有大厂支持,AntV迭代稳定,文档和示例非常的齐全,这次因为业务需求的原因使用到了AntV G2数据可视化引擎,所以想记录下自己使用和学习的心得。
G2 一套面向常规统计图表,以数据驱动的高交互可视化图形语法,具有高度的易用性和扩展性。使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。
G2 使用
npm 安装
npm install @antv/g2 --save
下面将G2 基础折线图作为示例代码分析([email protected]版本):
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();
几何图形 Geometry
API——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
渲染即可。对于不同的配置,只需要找到相关基类属性方法即可。只要了解了相关基类配置,对于图表的使用也会相当顺手。
参考: