antvis / antvis/G2

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

Open
#4,608 5 comments 3 reactions 0 assignees View on GitHub
v5
Dominant language
TypeScript
Stars
12.6k
Forks
1.7k
PR merge metrics
No merged PRs in 30d

Description

# 竞品对比

- G2 折线图动画直接是对 path 做插值,导致效果比较诡异。虽然可以关闭 animation 达到向左侧偏移的效果,但动画又比较生硬。
- ECharts 和 HighCharts 的实时动画就比较自然,希望能对齐。

| 图表库 | 动画效果 |
|----|----|
| [G2Plot](https://g2plot.antv.antgroup.com/) | [https://g2plot.antv.antgroup.com/examples/dynamic-plots/basic/#dynamic-spline](https://g2plot.antv.antgroup.com/examples/dynamic-plots/basic/#dynamic-spline)

开启动画效果: ![1673090074918-75bae90a-17cf-46cb-bd4d-4e5376ed04f8](https://user-images.githubusercontent.com/14918822/216015763-76e2346d-766f-47dd-9c44-40cf2dc66463.gif) 关闭动画效果 (设置 `animation: false`): ![1673090610327-f8f83932-3d7c-4932-93ec-2605528f97b7](https://user-images.githubusercontent.com/14918822/216015858-150b6e27-9363-4068-b087-2712a5ef3a5a.gif) |
| [ECharts](https://echarts.apache.org/) | [https://echarts.apache.org/examples/zh/editor.html?c=dynamic-data2](https://echarts.apache.org/examples/zh/editor.html?c=dynamic-data2) ![1673089552299-d4ccc080-f293-48f5-8a8c-27d8df562b91](https://user-images.githubusercontent.com/14918822/216016131-6d51b6ed-084a-4a09-a2b7-d34ec08428d9.gif) |
| [HighCharts](https://www.highcharts.com/) | [https://www.highcharts.com/demo/dynamic-update](https://www.highcharts.com/demo/dynamic-update) ![1673089807831-0e0450de-f9d9-4665-a074-f3b76df8d8ac](https://user-images.githubusercontent.com/14918822/216016214-852ef2c9-a57d-46de-a4b7-9a536825114a.gif) |

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the dynamic line-chart behavior shown in the G2Plot dynamic-spline example, comparing animation enabled with animation: false. Review the linked ECharts dynamic-data2 and HighCharts dynamic-update examples for the target behavior. Done means dynamic line-chart updates animate naturally rather than interpolating the path in a jarring way.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.