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用于绘制柱状图、直方图、南丁格尔玫瑰图、饼图、条形环图(玉缺图)、漏斗图等,而positioncolor均是 几何图形 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();

G2 基类

上面出现新的方法 交互 interaction用来调整图表与用户的交互展示。

几何图形 Geometry—— line、point、interval、area(绘制线、点、饼/柱、面积图)等 数据 data 度量 scale 图例 legend 提示 tooltip 交互 interaction 坐标系 coordinate

这些是在例子中出现的方法,如果按照官方的介绍,以上就是G2 图表中的基类,当然,上面只包含部分,还有其他基类,如 坐标轴 Axis滚动条 Scrollbar...等。

window.G2.Chart创建图表之后,即可通过图表实例,调用相关的基类方法,对图表进行定制化,最后render渲染即可。对于不同的配置,只需要找到相关基类属性方法即可。只要了解了相关基类配置,对于图表的使用也会相当顺手

现在再来看下面这串代码,你是否会特别清晰

let chart = window.G2.Chart({container: domID});

chart.data(data);

chart.scale({
    x: {nice: true},
    x: {nice: true}
});

chart.interval().position('gydw_mc*num');
chart.line().position('year*value').label('value');
chart.point().position('year*value');

chart.tooltip({
    showMarkers: false
});
chart.legend(false)

chart.render();

希望上面的内容对你使用antv G2 有所帮助,希望可以帮到你。

参考:

Antd G2 官方文档

书栈网:G2 4.x 官方教程

关注微信公号 更多干货 分享
扫码加V可交流 扫码备注 博客交流 欢迎
上次更新: 11/24/2021, 3:06:31 AM

评 论: