AntV使用在语法上和highcharts、echarts大相径庭,在初次使用时的感受会很酸爽,特别是定制化需求时‘看文档两小时,代码一小行’会很常见。这里罗列一下自己遇到的一些“坑”,且将持续更新:
- 图形的渲染:
渲染时在设置完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() //最后一步渲染至画布 - 图形的更新
图形数据或者tooltip需要根据需求改变时,最后一步chart.repaint()。其中chart的来源同上,可以将chart抽象至全局用于公用。
step1:更新数据可以用chart.changeData([....]),
step2:修改tooltip格式和内容时chart.tooltip({.....}),
stepN:其他属性的修改可参考上一条,
step last: chart.repaint();
//一定要最后执行这一步,否则会出现数据更新了但是tooltip等滞后更新的情况,呵呵哒我排查了俩小时才发现这个坑!
F53315A2-ACBA-4de8-8A9B-9A3E50612D11.png
网友评论