antvis/G2
The issue has been closed
玉珏图 changeData 更新数据,线不会变化 #3694
963779540 posted onGitHub
使用官方的示例进行修改,添加一个changeData后,数据中的点发生变化,线没有变,下图所示:
附完整代码
import { Chart } from '@antv/g2';
var data = [
{ term: 'Zombieland', count: 9 },
];
const chart = new Chart({
container: 'container',
autoFit: true,
height: 500,
padding: 50,
});
chart.data(data);
chart.scale({
count: {
min: 1,
max: 10,
},
});
chart.tooltip(false)
chart.coordinate('theta', {
innerRadius: 0.7,
radius: 1
})
chart
.interval()
.position('term*count')
.shape('line')
.style({
lineAppendWidth: 10,
}) // 线状柱状图
.animate({
appear: {
animation: 'wave-in', // 动画名称
easing: 'easeQuadIn', // 动画缓动效果
delay: 100, // 动画延迟执行时间
duration: 6000 // 动画执行时间
},
update: {
animation: 'wave-in', // 动画名称
easing: 'easeQuadIn', // 动画缓动效果
delay: 100, // 动画延迟执行时间
duration: 6000 // 动画执行时间
},
})
chart
.point()
.position('term*count')
.shape('circle')
.animate({
appear: {
animation: 'wave-in', // 动画名称
easing: 'easeQuadIn', // 动画缓动效果
delay: 100, // 动画延迟执行时间
duration: 6000 // 动画执行时间
},
update: {
animation: 'wave-in', // 动画名称
easing: 'easeQuadIn', // 动画缓动效果
delay: 100, // 动画延迟执行时间
duration: 6000 // 动画执行时间
},
})
chart.render();
setTimeout(function(){
data=[{
count: 5,
term: "Zombieland"
}]
console.log(data)
chart.changeData(data)
},12000)