antvis/G2

The issue has been closed
使用chart.facet时,调用changeData更新数据后,重新render图表,内存泄漏问题 #3333
Diazhao posted onGitHub
【bug】重现步骤
- 创建分面图表
chart.facet(...)
- 更新数据
chart.changeData(...)
此时无法正常更新,见issue - 之后再调用
chart.render()
分面可以正常更新 - 重复2,3步骤多次,内存泄漏
重现代码, 由g2的官方example改版
import DataSet from '@antv/data-set';
import { Chart } from '@antv/g2';
fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/fertility.json')
.then(res => res.json())
.then(data => {
const ds = new DataSet();
const dv = ds.createView().source(data);
dv.transform({
type: 'sort',
callback(a, b) {
return a.year - b.year;
}
});
const chart = new Chart({
container: 'container',
autoFit: true,
height: 500,
padding: [50, 20, 50, 50]
});
chart.data(dv.rows);
chart.scale({
value: {
max: 9,
min: 1
},
year: {
range: [0, 1],
ticks: ['1950', '2015']
}
});
chart.axis('year', {
grid: {
line: {
style: {
lineDash: [0, 0],
lineWidth: 1,
stroke: '#e9e9e9'
}
}
},
label: {
rotate: Math.PI / 4,
}
});
chart.tooltip({
showCrosshairs: true
});
chart.facet('rect', {
fields: ['country'],
columnTitle: {
style: {
fontSize: 12,
textAlign: 'center',
fontWeight: 300,
fill: '#8d8d8d'
}
},
padding: 8,
eachView: (view, facet) => {
view.line()
.position('year*value')
.shape('smooth')
.style({ opacity: 0.8 });
},
});
chart.render();
setInterval(() => {
chart.clear()
chart.changeData(dv.rows)
chart.render()
}, 2000)
});
内存使用情况如下图所示: