logoCreated with Sketch.

G2

G2

6 min read

全局命名空间 G2，包含：

常量 Constants

G2.version; // 返回 G2 当前的版本

类 Classes

Chart

主体图表类，用于控制图表的创建、绘制和销毁。

详细文档见 Chart API。

Shape

构成图表具体的形状类。

详细文档见 Shape API。

Scale

度量 Scale 类，是将原始数据转换为图形坐标的关键桥梁。

详细文档见 Scale API。

Animate

负责 G2 图表的动画生成，以及提供自定义动画的机制。

详细文档见 Animate API。

Global

包含 G2 内部所有常量的定义以及皮肤。比如你可以：

  1. 通过 G2.Global.fontFamily 获取 G2 图表默认的字体；
  2. 通过 G2.Global.setTheme('dark') 来切换或者设置皮肤，详细信息见 图表样式设置教程。
  3. 通过 G2.Global.renderer = 'svg' 指定默认用 svg 渲染。

Util

G2 默认提供的常见的工具类，采用类似 lodash 的接口。

如下：

const Util = {
  each: require('lodash/each'),
  map: require('lodash/map'),
  isObject: require('lodash/isObject'),
  isNumber: require('lodash/isNumber'),
  isString: require('lodash/isString'),
  isFunction: require('lodash/isFunction'),
  ...
};

DomUtil

用于操作 dom 相关的工具类。具体该工具类包含的方法如下：

方法参数说明返回结果
getBoundingClientRect(node)node:HTMLElement，dom 节点返回该节点在页面中的位置，返回结果格式为： {top: , bottom: , left: , right}
getStyle(dom, name)dom:HTMLElement，DOM 节点；name:String，样式名返回该节点对应样式名 name 的具体样式。
modifyCSS(dom, css)dom:HTMLElement，DOM 节点；css:Object，样式属性修改对应节点的 css 样式，返回修改样式后的 dom 对象。
createDom(str)str:String，Dom 字符串按照传入的 str 创建 dom 节点，并返回创建的节点。
getRatio()--返回屏幕的像素分辨率。
getWidth(el)el:HTMLElement，dom 节点返回 dom 节点的宽度，不包含 padding、border
getHeight(el)el:HTMLElement，dom 节点返回 dom 节点的高度，不包含 padding、border
getOuterWidth(el)el:HTMLElement，dom 节点返回 dom 节点的宽度，包含 padding、border
getOuterHeight(el)el:HTMLElement，dom 节点返回 dom 节点的高度，包含 padding、border
addEventListener(target, eventType, callback)target:HTMLElement，DOM 对象；eventType:String，事件名；callback:Function，回调函数添加事件监听器
requestAnimationFrame(fn)fn:Function，回调函数用于定时循环操作。

MatrixUtil

用于操作矩阵、向量的工具类。该工具类提供了操作三阶矩阵、二维向量和三维向量的方法，这些方法直接使用了 glMatrix 库，并且在其基础上添加了一些额外的遍历方法，具体如下代码：

  1. G2.MatrixUtil.mat3: 三阶矩阵，详见 http://glmatrix.net/docs/module-mat3.html；
  2. G2.MatrixUtil.vec2: 二维向量，详见 http://glmatrix.net/docs/module-vec2.html；
  3. G2.MatrixUtil.vec3: 三维向量，详见 http://glmatrix.net/docs/module-vec3.html；
  4. G2.MatrixUtil.transform(m, ts): 对三阶矩阵参数 m 按照 ts 进行变换，变换包含 t: translate，s: scale，r: rotate，m: multiply，具体使用如下：
G2.MatrixUtil.transform([ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], [
  [ 'r', Math.PI / 2 ],
  [ 't', 10, 10 ],
  [ 'r', -1 * Math.PI / 2 ]
]);

PathUtil

用于操作图形路径的工具类。具体提供的方法如下：

方法参数说明返回结果
parsePathString(pathString)pathString:String，字符串格式的路径，如 'M 10,39 L 20,50'将字符串格式的路径转换为数组格式，[ [ 'M', 10, 39 ], [ 'L', 20, 50 ] ]
parsePathArray(pathArray)pathArray:Array，数组格式的路径，如 [ [ 'M', 10, 39 ], [ 'L', 20, 50 ] ]将数组格式的路径转化为字符串，'M 10,39 L 20,50'
pathTocurve(path)path:Array，数组格式的路径路径转曲
pathToAbsolute(path)path:Array，数组格式的路径将所有的路径命令转换为绝对定位
catmullRomToBezier(pointsArray)pointsArray:Array，点的数组，如 [ 10, 12, 22, 1, ... ]将传入的点（至少四组点）转曲
intersection(path1, path2)path1:Array，数组格式的路径；path2:Array，数组格式的路径两条路径差值计算

G

G2 图表的底层渲染引擎。

方法 Functions

G2.track(true); // 开启打点监控
G2.track(false); // 关闭打点监控

该方法用于 G2 情况的打点监控，默认处于开启状态，如果您不想让我们知道您的版本使用情况，请使用调用 G2.track(false) 关闭。

！注意：当一个环境下同时存在 3.0.0 与 3.0.0 以下两个版本的 G2 时，请使用 G2_3 命名空间来使用 3.0.0 的版本。