G2 3.0 升级指引

阅读时间约 8 分钟

引入方式的改变

cdn

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

npm

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. container 替代原先的 idcontainer,及支持 string 也支持传入 dom 对象,为了兼容旧版,也支持直接使用 id
  2. 原先 plotCfg 属性废弃,原先的配置分别在 padding,background,plotBackground 中设置。
new G2.Chart({
  id: 'c1',
  plotCfg: {
    margin: 40,
    border: {
      stroke: '#bfbfbf'
    },
    background: {
      fill: 'rgba(0, 0, 0, 0.1)'
    }
  }
})
创建 view
chart.createView()
chart.view()
加载数据
chart.source(data, scaleDefs)
说明:
不再支持 namesArr 属性,如需要补全字段,请使用 DataView 的 transform
chart.source(data[, scaleDefs, namesArr])
列定义
chart.scale({});
chart.scale('', {});
chart.col('', {});
chart.cols({})
坐标轴配置
接口使用方式不变,但是对可配置的属性结构以及部分属性名做了变化,详见 chart.axis() API, 这里说明下变化较大的属性。
chart.axis('x', {
  label: {
    textStyle: {
      fill: 'red'
    },
    autoRotate: true,
    offset: 10,
    formatter: val => {}
  }
});
chart.axis('x', {
  labelOffset: 10,
  labels: {
    label: {
      fill: 'red'
    },
    autoRotate: true
  },
  formatter: val => {}
});
图例配置
接口使用方式不变,但是对可配置的属性结构以及部分属性名做了变化,并且新添加了更多的功能,详见 chart.legend() API
坐标系配置
G2 3.0 坐标系只支持 rect,polar,helix,theta 四种,原先的 inner 属性更名为 innerRadius
分面
chart.facet('list', {
  fields: [field],
  eachView(view, facet) {
     view.point().position('x*y');
     // guide
     // to do something else
  }
});
说明:
新增加了 matrix 分面,用于实现散点图矩阵。详见 chart.facet() API
chart.facet([field], {
  type: 'list'
});
chart.point().position('x*y')
tooltip 配置
G2 3.0 的 tooltip 使用 html 渲染。tooltip 配置的地方如下:
  1. view.tooltip(true | false)
Guide 创建
chart.guide().line({
  start: [startXValue, startYValue],
  end: [endXValue, endYValue],
  lineStyle: {
    stroke: '#999',
    lineDash: [0, 2, 2],
    lineWidth: 3
  }
});
说明:
  1. 原先的 chart.guide().rect() 更名为 chart.guide().region()
  2. 移除 chart.guide().tag()
  3. chart.guide().line() 支持文本
chart.guide().line([startXValue, startYValue], [endXValue, endYValue], {
  stroke: '#999', // 线的颜色
  lineDash: [0, 2, 2], // 虚线的设置
  lineWidth: 3 // 线的宽度
});
数据过滤
chart.filter('a', val => {});
chart.filter('a', []);
geom 创建
  1. chart.contour() 废弃,使用 chart.polygon() 代替;
  2. chart.interval(['dodge', 'stack']) 不再支持,请按照以下方式声明:
chart.interval().adjust(['dodge', 'stack'])
geom.position()
position('x*y')
说明
  1. 不再支持加法运算符
  2. 不再支持所有的统计函数嵌套方式
position('x*y');
position('x*(a+b)');
positon(Stat.summary.percent('x*y'))
geom.size()
size('x', [min. max])
size('x', max, min);
geom.label()
.label('x', {
    offset: -16,
    label: {
      fontWeight: 'bold',
      fontSize: 12
    },
    formatter: () => {}
})
.label('x', {
    offset: -16,
    textStyle: {
        fontWeight: 'bold',
        fontSize: 12
    },
    renderer: () => {}
})
geom 的选中模式
geom.select()
geom.selected()
自定义 Shape
G2.Shape.registerShape('interval', {
  getPoints(cfg) {},
  draw(cfg, container) {}
});
G2.Shape.registShape('interval', {
  getShapePoints(cfg) {},
  drawShape(cfg, container) {}
});
自定义动画
G2.Animate.registerAnimation()
G2.Animate.registAnimation()
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)
easing 的名称全部采用 [d3-easing](https://github.com/d3/d3-ease)。
事件
chart.on('tooltip:change');
chart.on('tooltip:show');
chart.on('tooltip:hide')
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 中在列定义中进行声明:
chart.scale('x', {
  sync: true
})
  • plotCfg
  • chart.on(‘itemselected’)
  • chart.on(‘itemunselected’)
  • chart.on(‘itemselectedchange’)
  • chart.on(‘rangeselectstart’)
  • chart.on(‘rangeselectend’)