G2 官方版 v4.1.11

软件介绍

G2可视化引擎提供图表设计功能，可以通过这款软件帮助用户设计新的图表，可以处理图表数据，可以设置数据交互方式，可以编辑处理数据流程，可以将复杂的数据可视化，对于需要处理数据和统计数据的朋友很实用，您可以借助这款图形语法设计具有图表功能的程序，提供坐标轴、图例、提示、文本标签配置、图形标注、滑块、动条、几何图形、图形元素、View视图、交互语法等多种编辑功能，为用户设计各种行业需求的数据统计图表，结合DataSet工具就可以管理数据，可以通过DataSet导入数据到图表分析！

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 容器后，我们就可以进行简单的图表绘制：

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

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

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

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

G2软件优势

G2 所构建出的图表是由一系列的图形语法元素组合而成的：

数据 Data：可视化最基的部分。

图形属 Attbute：负责将数据中的变量映至图形空间。

几何标记 Geometry：即你在图表中实际看到的图形元素，如点、线、多边形等，每个几何标记对象含有多个图形属，G2 的核心就是建立数据中的一系列变量到图形属的映。

度量 Scale：数据空间到图形属空间的转换桥梁，每一个图形属都对应着一个或者多个度量。

坐标系 Coordinate：描述了数据是如何映到图形所在的平面的，同一个几何标记在不同坐标系下会有不同的表现。G2 提供了多种坐标系的支持：笛卡尔坐标、极坐标以及螺旋坐标等。

可视化组件 Component：也可以成为图表辅助元素，用于增强图表的可读和可理解，在 G2 中，提供了丰富的可视化组件，包括坐标轴 Axis，图例 Legend，提示 Tooltip，图形标记 Annotation，滑动条 Slider 等。

分面 Facet：描述了如何将数据分解为各个子集，以及如何对这些子集作图并联合进行展示，主要用于数据分析。

G2图形组件

常见的 G2 图表包含的组件如下图所示：

几何图形 Geometry

几何图形（Geometry），即我们所说的点、线、面这些几何图形，在 G2 中几何标记的类型决定了生成图表的类型，也就是数据被可视化后的实际表现，不同的几何标记都包含对应的图形属 Attbute。

坐标轴 Axis

每个图表通常包含两个坐标轴，在直角坐标系（笛卡尔坐标系）下，分别为 x 轴和 y 轴，在极坐标轴下，则分别由角度和半径 2 个维度构成。

每个坐标轴由坐标轴线（line）、刻度线（tickLine）、刻度文本（label）、标题（title）以及网格线（gd）组成。

图例 Legend

图例作为图表的辅助元素，用于标定不同的数据类型以及数据的范围，辅助阅读图表，帮助用户在图表中进行数据的筛选过滤。

提示 Tooltip

当鼠标悬停在某个点上时，会以提示框的形式显示当前点对应的数据的，比如该点的值，数据单位等。数据提示框内提示的还可以通过格式化函数动态指定。

辅助标记 Annotation

当需要在图表上绘制一些辅助线、辅助框或者图片时，比如增加平均值线、最高值线或者标示明显的范围区域时，可以使用辅助标记 annotation。

缩略轴 Slider

当图表中数据量比较多，用户希望关注数据集中在某个特殊区域的时候，可以使用缩略轴组件。缩略轴较适用于折线图。

动条 Scllbar

当图表中数据量比较多多，也可以适用动条组件来一次只浏览一部分数据。动条组件提供水平动条、和垂直动条。动条组件较适用于柱形图和条形图。

G2坐标轴

坐标轴和坐标作为图表的引导元素，可以帮助你将图形与原始值进行映关联。在 G2 中，坐标轴是自动生成的，它的内容是由 scale 度量控制的，而渲染的细节则是由主题控制。

坐标轴组成

下图表示了 G2 坐标轴的组成部分：

坐标系控制着坐标轴和网格线的绘制，不同的坐标系下坐标轴的表现不同，下图展示了两种不同坐标系的坐标轴和网格线：

坐标轴配置

G2 提供了坐标轴的配置接口，主要用于坐标轴样式的配置：

chart.axis();

关于该接口的详细使用，可以阅读相关的 API 文档，下面主要向大家介绍关于坐标轴内容的配置方法。

title 配置

在本篇开头提到过，坐标轴的内容是由 scale 度量控制的，所以 scale 度量的名字控制着坐标轴的标题内容。 chart.axis() 只用于控制坐标轴的外观配置，在 G2 默认主题中，我们关闭了 title 的展示。

默认情况下，我们会为每条坐标轴生成标题，标题名默认为该轴对应数据字段的属名。当需要为坐标轴设置别名时，则需要通过 chart.scale() 接口，为对应的 scale 度量设置 alias 别名属来改变坐标轴标题。

label 配置

坐标轴文本的内容同样也受 scale 度量的控制，G2 默认会生成所有的 label 内容，我们可以通过 chart.scale() 接口改变对应坐标轴 label 的显示：

当需要对数值进行格式化时，也可以通过 chart.scale() 接口：

chart.axis() 接口中的 label 属则用于 label 的样式主题配置。

设置坐标轴数值范围

坐标轴的数值范围受数据的约束，同时也可以通过 chart.scale() 接口进行配置，每一种坐标轴数值范围的选择都会导致最后可视化结果的不同：

设置坐标轴刻度线个数

默认的坐标轴刻度线个数是 5 个，同样可以通过 chart.scale()，用户可以自定义坐标轴刻度线的个数。

设置坐标轴刻度线间距

对于连续类型的数据，G2 还支持设置坐标轴刻度线的间距（tickInterval 属），同样需要在 chart.scale() 中进行配置，但是需要说明的是，tickInterval 为原始数据值的差值，并且 tickCount 和 tickInterval 不可以同时声明。

设置坐标系两端留白

对于分类数据的坐标轴两边默认会留下一定的留白，连续数据的坐标轴的两端则没有留白。

两端的留白可通过 chart.scale() 接口中的 range 属进行配置，分类数据的 range 的默认值是 [ 1 / (count - 1), 1 - 1 / (count - 1) ]，count 代表数据的个数，可以修改这个值达到改变留白大小的目的。