G2(可视化引擎)

G2功能介绍

1、健全的图形语法：数据到图形的映射，可以制作出全部的图表。

2、全新的交互语法：根据激发和反馈机制可以搭配出各种各样交互行为，对数据进行探寻。

3、强大的View控制模块：可支持开发个性化的数据多维分析图形。

4、双引擎渲染：Canvas或SVG随意转换。

5、可视化组件体系：面向交互、体验优雅。

6、全方位相拥TypeScript：提供详细的类型定义文档。

G2特色说明

1、图表示例

G2(可视化引擎)官方版千变万化，随意搭配

任何图表，都能够基于图形语法灵活制作，满足你无尽的创意。

2、专业完备

很多产品实践之上，提供制图引擎、完备图形语法、专业设计规范。

3、生动，可交互

强大的交互语法，助推可视分析，让图表惟妙惟肖。

4、精品Gallery

真正的数据可视化案例，我们将他们归纳为一个个故事性的设计模板，让用户做到开箱即用的效果。

G2使用教程

通过 npm 安装

npm install @antv/g2 --save

成功安装完成之后，即可使用 import 或 require 进行引用。

浏览器引入

既可以通过将脚本下载到本地也可以直接引入在线资源

开始使用

在 G2 引入页面后，我们就已经做好了创建第一个图表的准备了。

下面是以一个基础的柱状图为例开始我们的第一个图表创建。

1、创建 div 图表容器

在绘图前我们需要为 G2 准备一个 DOM 容器。

2.、编写图表绘制代码

创建 div 容器后，我们就可以进行简单的图表绘制：

1、new Chart() 创建 Chart 图表对象，指定图表所在的容器 id、图表的宽高、边距等信息;

2、chart.data() 载入图表数据源;

3、使用图形语法进行图表的绘制;

4、chart.render() 渲染图表。