G2 3.0 升级指引
引入方式的改变
cdn
<script src="{{ url.g2 }}"></script>
npm
npm install @antv/g2 --save
同时我们为 G2 2.x 和 G2 3.0 提供了共存机制,当两个版本同时存在时,请使用 G2_3
命名空间来使用 3.0.0 的版本。
图表结构变化
- G2 3.0 的图表 只由一层 canvas 组成,不再是之前的三层画布;
- tooltip 统一使用 html 进行渲染。
变更的接口
接口描述
|
G2 3.0 版本
|
G2 2.x 版本
|
创建 chart 对象
|
|
|
创建 view
|
|
|
加载数据
|
不再支持
namesArr 属性,如需要补全字段,请使用 DataView 的 transform |
|
列定义
|
|
|
坐标轴配置
|
接口使用方式不变,但是对可配置的属性结构以及部分属性名做了变化,详见
chart.axis() API, 这里说明下变化较大的属性。
|
|
图例配置
|
接口使用方式不变,但是对可配置的属性结构以及部分属性名做了变化,并且新添加了更多的功能,详见
chart.legend() API
|
|
坐标系配置
|
G2 3.0 坐标系只支持
rect,polar,helix,theta 四种,原先的 inner 属性更名为 innerRadius |
|
分面
|
新增加了 matrix 分面,用于实现散点图矩阵。详见
chart.facet() API。
|
|
tooltip 配置
|
G2 3.0 的 tooltip 使用 html 渲染。tooltip 配置的地方如下:
|
|
Guide 创建
|
|
|
数据过滤
|
|
|
geom 创建
|
|
|
geom.position()
|
|
|
geom.size()
|
|
|
geom.label()
|
|
|
geom 的选中模式
|
|
|
自定义 Shape
|
|
|
自定义动画
|
|
|
shape.animte
|
easing 的名称全部采用 [d3-easing](https://github.com/d3/d3-ease)。
|
|
事件
|
|
|
废弃的类、接口、属性、事件
G2.Frame废除Frame
,由 DataView 替代。G2.Stat废除Stat
, 由 DataView 的 transform 替代。G2.Theme直接使用G2.Global
。G2.Canvas直接使用 G2.GG2.CoordG2.BaseG2.ColorCalculateG2.Layout由 DataView 的 transform 相应的方法替代。chart.col() 以及 chart.cols()使用chart.scale()
替代chart.guide().tag()chart.guide().rect()使用chart.guide().region()
替代。chart.setMode()chart.select()chart.getPosition()使用chart.getXY()
替代。chart.contour()通过 ploygon 来实现。syncXYScales度量统一,3.0 中在列定义中进行声明:
chart.scale('x', {
sync: true
})
plotCfgchart.on(‘itemselected’)chart.on(‘itemunselected’)chart.on(‘itemselectedchange’)chart.on(‘rangeselectstart’)chart.on(‘rangeselectend’)