G2 v4.1.11

G2相关介绍

G2 一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用和扩展。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。

G2软件功能

完善的图形语法：数据到图形的映，能够绘制出所有的图表。

全新的交互语法：通过触发和反馈机制可以组合出各种交互行为，对数据进行探索。

强大的 View 模块：可支持开发个化的数据分析图形。

双引擎渲染：Canvas 或 SVG 任意切换。

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

全面拥抱 TypeScpt：提供完整的类型定义文件。

G2软件特色

千变万化，自由组合

任何图表，都可以基于图形语法灵活绘制，满足你无限的创意

专业完备

大量产品实践之上，提供绘图引擎、完备图形语法、专业设计规范

生动，可交互

强大的交互语法，助力可视分析，让图表栩栩如生

G2新版功能

1、全面拥抱 TypeScpt。

2、全新的可视化组件：面向交互，体验优雅。

3、强大的 View 模块：可单独使用，具备完备的可视化组件、事件，支持 View 嵌套以及自动布局。

4、全新的交互语法。

5、绘图引擎升级至 G 0.4 版本，支持双引擎切换。

6、引入数据更新机制。

7、动画机制改造，更细粒度，体验更好。

8、模块化管理，提供更加灵活的扩展机制。

G2教程

通过 npm 安装

npm install @antv/g2 –save

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

浏览器引入

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

开始使用

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

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

1. 创建 div 图表容器

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

2. 编写图表绘制代码

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