介绍
@antv/g2是一款非常强大的JavaScript可视化图表库，基于HMTL5 Canvas实现，可以轻松地生成各种类型的数据可视化图表，如折线图、柱状图、饼图、雷达图等等。@antv/g2提供了丰富的图表类型、组合图表、动画效果等功能，使用非常方便，适合各种类型的前端应用。
安装
@antv/g2是一款npm包，可以通过npm工具来安装。在命令行中输入以下命令即可：
npm install @antv/g2 --save
使用
安装完成后，我们就可以在我们的项目中使用@antv/g2库了。下面我们来看看@antv/g2的使用方法。
导入模块
在我们的JavaScript文件中，我们需要先导入@antv/g2的模块，使用如下语句：
import * as G2 from '@antv/g2';
创建图表
在我们导入了@antv/g2模块后，我们就可以使用G2对象来创建我们的图表了。下面我们来看一个简单的折线图的创建过程：
-- -------------------- ---- ------- --- ---- - - - ----- ------- ------ ------- -- - ----- ------- ------ ------- -- - ----- ------- ------ ------- -- - ----- ------- ------ ------- -- - ----- ------- ------ ------- -- - ----- ------- ------ -------- -- -- --- ----- - --- ---------- ---------- ------------------ ------ ---- ------- --- --- ------------------- -------------------------------------------- ---------------展开代码
在上面的代码中，我们先定义了一个data数组，里面包含了我们想要呈现的数据。然后，我们创建了一个chart对象，指定了要呈现图表的容器和图表的宽和高。接着，我们将我们的数据绑定到我们的chart对象上。然后我们采用line()函数创建了一个折线图，指定我们的x轴是“year”，y轴是“sales”。最后我们调用render()函数，将我们的图表渲染到页面上。
深入学习
G2图表的组成
在学习G2之前，我们需要先了解一下G2图表的组成。如下图所示，G2图表主要由以下几个组成部分：
以上部分中：
- Canvas 是绘制图表的画布;
- Coordinate 组件用于指定坐标系，包括直角坐标系、柱状图坐标系、极坐标系；
- Axis 组件用于指定坐标轴及其对应的图例；
- Geometry 是图形元素，它决定了绘制的形状和大小，可以用于绘制直线、区域、点、柱状等形状；
- Scale 是数据映射组件，它可以将数据值映射到坐标轴上；
- Guide 是辅助元素，包括标注、图例等辅助元素。
数据绑定
G2中最常用的就是数据处理了。G2支持各种数据格式的读取，包括数组、JSON、CSV、TSV等等。首先我们需要使用source函数将数据源与Chart对象进行绑定：
-- -------------------- ---- ------- --- ---- - - - ----- ------- ------ ------- -- - ----- ------- ------ ------- -- - ----- ------- ------ ------- -- - ----- ------- ------ ------- -- - ----- ------- ------ ------- -- - ----- ------- ------ -------- -- -- -------------------展开代码
在以上代码中，我们首先定义了一组数据，然后使用source函数将这组数据绑定到我们的Chart对象上。我们可以看到，source函数会自动检测我们的数据类型，并将数据按照指定规则进行解析。
坐标系
G2提供了多种类型的坐标系，包括直角坐标系、极坐标系、圆形坐标系等等。在创建图表对象时，我们需要使用coord()函数选用坐标系。下面是一些常见的坐标系的使用方法：
直角坐标系
chart = new G2.Chart({ container: 'chart-container', width: 600, height: 400, padding: [20, 50, 50, 100] // 设置边距 }); chart.coord('rect');
在以上代码中，我们使用coord()函数选用了直角坐标系。直角坐标系是一种二维笛卡尔坐标系，可以用于绘制折线图、柱状图、散点图等图表。
极坐标系
chart = new G2.Chart({ container: 'chart-container', width: 600, height: 400, padding: [20, 50, 50, 100] // 设置边距 }); chart.coord('polar');
在以上代码中，我们使用coord()函数选用了极坐标系。极坐标系通常用于绘制极坐标图，如饼图、雷达图、玫瑰图等。
圆形坐标系
chart = new G2.Chart({ container: 'chart-container', width: 600, height: 400, padding: [20, 50, 50, 100] // 设置边距 }); chart.coord('circle');
在以上代码中，我们使用coord()函数选用了圆形坐标系。圆形坐标系通常用于绘制圆形饼图。
图形绘制
G2支持各种类型的图形绘制，包括折线图、柱状图、饼图、雷达图、散点图等。下面我们来介绍一些常见的图形绘制类型及其使用方法。
折线图
-- -------------------- ---- ------- --- ---- - - - ----- ------- ------ ------- -- - ----- ------- ------ ------- -- - ----- ------- ------ ------- -- - ----- ------- ------ ------- -- - ----- ------- ------ ------- -- - ----- ------- ------ -------- -- -- --- ----- - --- ---------- ---------- ------------------ ------ ---- ------- --- --- ------------------- -------------------------------------------- ---------------展开代码
在以上代码中，我们先定义了一组数据，然后使用source()函数将数据源与Chart对象进行绑定。接着，我们使用line()函数创建了一条折线，使用position()函数指定了x轴和y轴的数据来源，使用size()函数指定了折线的粗细程度。最后，我们调用render()函数将图表渲染到页面上。
柱状图
-- -------------------- ---- ------- --- ---- - - - ------ --------- ----- --- -- - ------ ----------- ----- --- -- - ------ --------- ----- --- -- - ------ ---------- ----- --- -- - ------ -------- ----- --- - -- --- ----- - --- ---------- ---------- ------------------ ------ ---- ------- --- --- ------------------- ------------------------------------------------------- ---------------展开代码
在以上代码中，我们先定义了一组数据，然后使用source()函数将数据源与Chart对象进行绑定。接着，我们使用interval()函数创建了一组柱状图，使用position()函数指定了x轴和y轴的数据来源，使用color()函数指定了每组柱状图的颜色。最后，我们调用render()函数将图表渲染到页面上。
饼图
-- -------------------- ---- ------- --- ---- - - - ------ --------- ----- --- -- - ------ ----------- ----- --- -- - ------ --------- ----- --- -- - ------ ---------- ----- --- -- - ------ -------- ----- --- - -- --- ----- - --- ---------- ---------- ------------------ ------ ---- ------- --- --- ------------------- ------------------------------------------------------- ---------------展开代码
在以上代码中，我们先定义了一组数据，然后使用source()函数将数据源与Chart对象进行绑定。接着，我们使用pie()函数创建了一个饼图，使用position()函数指定了饼图的数据来源，使用color()函数指定了每部分饼图的颜色。最后，我们调用render()函数将图表渲染到页面上。
雷达图
-- -------------------- ---- ------- --- ---- - - - ----- --------- ----- --- --------- -- -- - ----- -------------- ----- --- --------- -- -- - ----- ------------ ----- --- --------- -- -- - ----- -------- ----- --- --------- -- -- - ----- ------- ----- --- --------- -- -- - ----- ----------- ----- --- --------- -- -- - ----- ------------- ----- --- --------- -- -- - ----- ---------- ----- --- --------- -- - -- --- ----- - --- ---------- ---------- ------------------ ------ ---- ------- --- --- ------------------ - ----- ----- -- ---- ----- --------- ----- -- ---- ---- --- --------------------- ------------------ - ----- ----- --------- ----- ----- - ---------- - --------- ---- -- -------------- ----- - --- ------------------ - ----- ----- --------- ----- ----- - ---------- - --------- ---- -- ----- ---------- --------------- -------- -- -- ------ - --- ------------------------------------------------ ----------------------------------------------------- ------------------------------------------------- ------------------------------------------------------ ---------------展开代码
在以上代码中，我们先定义了一组数据，然后使用source()函数将数据源与Chart对象进行绑定。接着，我们使用coord()函数选用了极坐标系。然后，我们使用axis()函数分别绘制了雷达图的两个坐标轴。最后，我们使用line()和point()函数绘制了雷达图的两种元素，分别表示数据的折线和数据点。
总结
通过本文的学习，我们可以看到@antv/g2是一款非常强大的可视化图表库，可以轻松地生成各种类型的数据可视化图表。在使用过程中，我们需要学习一些基本的概念，如数据绑定、坐标系、图形绘制等。希望本文能对大家在学习和使用@antv/g2时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedacd8b5cbfe1ea0610b54
