antvis/G2

Do you want to work on this issue?

You can request for a bounty in order to promote it!

[Feature Request] 📈 折线图在动态数据下的动画效果优化 #4608

dengfuping posted onGitHub

竞品对比

  • G2 折线图动画直接是对 path 做插值,导致效果比较诡异。虽然可以关闭 animation 达到向左侧偏移的效果,但动画又比较生硬。
  • ECharts 和 HighCharts 的实时动画就比较自然,希望能对齐。
图表库 动画效果
G2Plot https://g2plot.antv.antgroup.com/examples/dynamic-plots/basic/#dynamic-spline <br /><br /> 开启动画效果: 1673090074918-75bae90a-17cf-46cb-bd4d-4e5376ed04f8 关闭动画效果 (设置 animation: false): 1673090610327-f8f83932-3d7c-4932-93ec-2605528f97b7
ECharts https://echarts.apache.org/examples/zh/editor.html?c=dynamic-data2 1673089552299-d4ccc080-f293-48f5-8a8c-27d8df562b91
HighCharts https://www.highcharts.com/demo/dynamic-update 1673089807831-0e0450de-f9d9-4665-a074-f3b76df8d8ac

非常好的建议,对于时序图可能需要特殊处理一下。

posted by pearmini about 2 years ago

非常好的建议,对于时序图可能需要特殊处理一下。

@pearmini 有好的优化思路吗?可以参与一起实现

posted by dengfuping about 2 years ago

目前的思路就是:

  • 关闭默认的动画
  • 自定义一个针对这种情况的折线图

自定义的思路如下:

  • 删除上一帧的 Path
  • 这一帧的 Path 首先平移到上一帧的位置(根据新老数据计算)
  • translate 属性进行差值动画,平移到这一帧的位置。
posted by pearmini about 2 years ago

@dengfuping 这里有参考的算法。

posted by hustcc about 2 years ago

@dengfuping 这里有参考的算法。

ECharts 的 demo 只有生成和更新动态数据的逻辑,动画是在其内部实现的,不太有参考的意义

posted by dengfuping over 1 year ago

Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests