引入方式的改变

cdn

  1. <script src="{{ url.g2 }}"></script>

npm

  1. npm install @antv/g2 --save

同时我们为 G2 2.x 和 G2 3.0 提供了共存机制，当两个版本同时存在时，请使用 G2_3 命名空间来使用 3.0.0 的版本。

图表结构变化

  1. G2 3.0 的图表 只由一层 canvas 组成，不再是之前的三层画布；

  2. tooltip 统一使用 html 进行渲染。

变更的接口

接口描述 G2 3.0 版本 G2 2.x 版本
创建 chart 对象 ```

new G2.Chart({ container: ‘c1’, padding: 40, background: { stroke: ‘#bfbfbf’ }, plotBackground: { fill: ‘rgba(0, 0, 0, 0.1)’ } });

  1. <br />> 说明：
  3. 1. `container` 替代原先的 `id` 和 `container`，及支持 string 也支持传入 dom 对象，为了兼容旧版，也支持直接使用 `id`
  4. <br />2. 原先 `plotCfg` 属性废弃，原先的配置分别在 `padding，background，plotBackground` 中设置。
  5. <br /> |

new G2.Chart({ id: ‘c1’, plotCfg: { margin: 40, border: { stroke: ‘#bfbfbf’ }, background: { fill: ‘rgba(0, 0, 0, 0.1)’ } } })

  1.  |
  2. | 创建 view |

chart.createView()

  1.  |

chart.view()

  1.  |
  2. | 加载数据 |

chart.source(data, scaleDefs)

  1. > 说明:
  3. 不再支持 `namesArr` 属性，如需要补全字段，请使用 DataView 的 transform |

chart.source(data[, scaleDefs, namesArr])

  1.  |
  2. | 列定义 |

chart.scale({}); chart.scale(‘’, {});

  1.  |

chart.col(‘’, {}); chart.cols({})

  1.  |
  2. | 坐标轴配置 | 接口使用方式不变，但是对可配置的属性结构以及部分属性名做了变化，详见 [chart.axis() API](https://www.yuque.com/antv/g2-docs/api-chart#whc6bq), 这里说明下变化较大的属性。

chart.axis(‘x’, { label: { textStyle: { fill: ‘red’ }, autoRotate: true, offset: 10, formatter: val => {} } });

  1.  |

chart.axis(‘x’, { labelOffset: 10, labels: { label: {
fill: ‘red’ }, autoRotate: true }, formatter: val => {}
});

  1.  |
  2. | 图例配置 | 接口使用方式不变，但是对可配置的属性结构以及部分属性名做了变化，并且新添加了更多的功能，详见 [chart.legend() API](https://www.yuque.com/antv/g2-docs/api-chart#h34mcz) |  |
  3. | 坐标系配置 | G2 3.0 坐标系只支持 `rect,polar,helix,theta` 四种，原先的 `inner` 属性更名为 `innerRadius` |  |
  4. | 分面 |

chart.facet(‘list’, { fields: [field], eachView(view, facet) { view.point().position(‘x*y’); // guide // to do something else } });

  1. > 说明：
  3. 新增加了 matrix 分面，用于实现散点图矩阵。详见 [chart.facet() API](https://www.yuque.com/antv/g2-docs/api-chart#cizqmm)。 |

chart.facet([field], { type: ‘list’ }); chart.point().position(‘x*y’)

  1.  |
  2. | tooltip 配置 | G2 3.0 的 tooltip 使用 html 渲染。tooltip 配置的地方如下：<br />1. [chart.tooltip()](https://www.yuque.com/antv/g2-docs/api-tooltip)
  3. <br />2. view.tooltip(true &#124; false)
  4. <br />3. [geom.tooltip()](https://www.yuque.com/antv/g2-docs/api-geom#dlu5rn)
  5. <br /> |  |
  6. | Guide 创建 |

chart.guide().line({ start: [startXValue, startYValue], end: [endXValue, endYValue], lineStyle: { stroke: ‘#999’, lineDash: [0, 2, 2], lineWidth: 3 } });

  1. <br />> 说明：
  3. 1. 原先的 chart.guide().rect() 更名为 chart.guide().region()
  4. <br />2. 移除 chart.guide().tag()
  5. <br />3. chart.guide().line() 支持文本
  6. <br /><br /><br />详见 [chart.guide() API](https://www.yuque.com/antv/g2-docs/api-chart#gokznc) |

chart.guide().line([startXValue, startYValue], [endXValue, endYValue], { stroke: ‘#999’, // 线的颜色 lineDash: [0, 2, 2], // 虚线的设置 lineWidth: 3 // 线的宽度 });

  1.  |
  2. | 数据过滤 |

chart.filter(‘a’, val => {});

  1. 详见 [chart.filter() API](https://www.yuque.com/antv/g2-docs/api-chart#ybmudb) |

chart.filter(‘a’, []);

  1.  |
  2. | geom 创建 | <br />1. `chart.contour()` 废弃，使用 `chart.polygon()` 代替；
  3. <br />2. `chart.interval(['dodge', 'stack'])` 不再支持，请按照以下方式声明：
  4. <br />

chart.interval().adjust([‘dodge’, ‘stack’])

  1.  |  |
  2. | geom.position() |

position(‘x*y’)

  1. <br />> 说明
  3. 1. 不再支持加法运算符
  4. <br />2. 不再支持所有的统计函数嵌套方式
  5. <br /> |

position(‘xy’); position(‘x(a+b)’); positon(Stat.summary.percent(‘x*y’))

  1.  |
  2. | geom.size() |

size(‘x’, [min. max])

  1.  |

size(‘x’, max, min);

  1.  |
  2. | geom.label() |

.label(‘x’, { offset: -16, label: { fontWeight: ‘bold’, fontSize: 12 }, formatter: () => {} })

  1. <br /><br />详见 [geom.label() API](https://www.yuque.com/antv/g2-docs/api-geom#84ebds) |

.label(‘x’, { offset: -16, textStyle: { fontWeight: ‘bold’, fontSize: 12 }, renderer: () => {} })

  1.  |
  2. | geom 的选中模式 |

geom.select()

  1.  |

geom.selected()

  1.  |
  2. | 自定义 Shape |

G2.Shape.registerShape(‘interval’, { getPoints(cfg) {}, draw(cfg, container) {} });

  1.  |

G2.Shape.registShape(‘interval’, { getShapePoints(cfg) {}, drawShape(cfg, container) {} });

  1.  |
  2. | 自定义动画 |

G2.Animate.registerAnimation()

  1.  |

G2.Animate.registAnimation()

  1.  |
  2. | shape.animte |

/**

  • 执行动画
  • @param {Object} toProps 动画最终状态
  • @param {Number} duration 动画执行时间
  • @param {Number} delay 动画延迟时间
  • @param {String} easing 动画缓动效果
  • @param {Function} callback 动画执行后的回调 */ shape.animate(toProps, duration, delay = 0, easing, callback)
    1. <br /><br />easing 的名称全部采用 [d3-easing](https://github.com/d3/d3-ease)。 |  |
    2. | 事件 |
    chart.on(‘tooltip:change’); chart.on(‘tooltip:show’); chart.on(‘tooltip:hide’)
    1. |
    chart.on(‘tooltipchange’); chart.on(‘tooltipshow’); chart.on(‘tooltiphide’) ``` |

废弃的类、接口、属性、事件

  • G2.Frame
    废除 Frame ，由 DataView 替代。

  • G2.Stat
    废除 Stat, 由 DataView 的 transform 替代。

  • G2.Theme
    直接使用 G2.Global。

  • G2.Canvas
    直接使用 G2.G

  • G2.Coord

  • G2.Base

  • G2.ColorCalculate

  • G2.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 中在列定义中进行声明:

  1. chart.scale('x', {
  2.   sync: true
  3. })

  • plotCfg

  • chart.on(‘itemselected’)

  • chart.on(‘itemunselected’)

  • chart.on(‘itemselectedchange’)

  • chart.on(‘rangeselectstart’)

  • chart.on(‘rangeselectend’)