AntV G2使用中遇到的坑

2018-05-25  本文已影响0人  花泽香个菜菜

AntV使用在语法上和highcharts、echarts大相径庭,在初次使用时的感受会很酸爽,特别是定制化需求时‘看文档两小时,代码一小行’会很常见。这里罗列一下自己遇到的一些“坑”,且将持续更新:

  1. 图形的渲染:
    渲染时在设置完legend、tooltip、source等一系列后最后一步chart.render()。 其中chart的来源如下(以折线图为例):
    import G2 from '@antv/g2';
    chart = new G2.Chart({
    container: chartId,
    forceFit: true,
    height: 400,
    padding: [20, 'auto', 30, 'auto']
    });
    ....... //各种配置balabala
    chart.render() //最后一步渲染至画布
  2. 图形的更新
    图形数据或者tooltip需要根据需求改变时,最后一步chart.repaint()。其中chart的来源同上,可以将chart抽象至全局用于公用。
    step1:更新数据可以用chart.changeData([....]),
    step2:修改tooltip格式和内容时chart.tooltip({.....}),
    stepN:其他属性的修改可参考上一条,
    step last: chart.repaint();
    //一定要最后执行这一步,否则会出现数据更新了但是tooltip等滞后更新的情况,呵呵哒我排查了俩小时才发现这个坑!
    F53315A2-ACBA-4de8-8A9B-9A3E50612D11.png
上一篇下一篇

猜你喜欢

热点阅读