G2 3.0 升级指引

引入方式的改变

cdn

  1. <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.2.7/dist/g2.min.js"></script>

npm

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

原文: https://antv.alipay.com/zh-cn/g2/3.x/tutorial/g2-v3-changes.html