antvis/G2

玉珏图 changeData 更新数据,线不会变化 #3694

963779540 posted onGitHub

使用官方的示例进行修改,添加一个changeData后,数据中的点发生变化,线没有变,下图所示:

image

附完整代码

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)

Fund this Issue

$0.00
Funded

Pull requests