Antv G2 Chart
Add AntV G2 v5 enter, update, and exit chart animations so dashboards feel polished without hand-rolling easing and timing.
Overview
antv-g2-chart is an agent skill for the Build phase that documents how to configure AntV G2 v5 chart animations for enter, update, and exit transitions.
Install
npx skills add https://github.com/antvis/chart-visualization-skills --skill antv-g2-chartWhat is this skill?
- Covers enter, update, and exit animation timing via the G2 v5 `animate` property
- Built-in types: fadeIn/Out, scaleInX/Y, growInX/Y, waveIn, zoomIn/Out, morphing, pathIn
- Per-animation `duration`, `delay`, and `easing` controls
- Scene guidance table maps animation names to bar, line, pie, and point charts
- Runnable minimal `Chart` + `interval` example with `@antv/g2`
- 13 built-in animation types listed in the quick-reference table
- Three animation timings: enter, update, exit
Adoption & trust: 586 installs on skills.sh; 337 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your G2 charts snap into place with no transition, so dashboard updates feel harsh and you waste time guessing which built-in animation fits each mark type.
Who is it for?
Indie builders adding motion to G2 5.x interval, line, pie, or point charts in a web app or internal SaaS dashboard.
Skip if: Teams not using AntV G2, or projects that need a full chart scaffold from scratch without any chart init skill.
When should I use this skill?
Chart first render or data updates need polished G2 v5 motion instead of instant draws.
What do I get? / Deliverables
After applying the skill, charts use named G2 presets with tuned duration, delay, and easing on enter, update, and exit.
- Chart options with `animate` blocks for enter, update, and/or exit
- Animation preset choice aligned to mark type (bar, line, pie, point)
Recommended Skills
Journey fit
Chart animation configuration lands while you are implementing the product UI and data visuals, not during launch SEO or ops monitoring. The skill documents G2 `animate` on chart options—directly part of frontend chart implementation in React/Vue or plain JS apps.
How it compares
Use for G2-native `animate` presets—not for choosing chart libraries or building non-G2 D3 animations from scratch.
Common Questions / FAQ
Who is antv-g2-chart for?
Solo and small-team frontend builders shipping data visuals with @antv/g2 who want a concise animation preset and timing reference.
When should I use antv-g2-chart?
During Build when you wire dashboards: first-load entrance motion, smooth updates on refresh, and exit fades when series change.
Is antv-g2-chart safe to install?
Treat it as documentation-style procedural knowledge; review the Security Audits panel on this Prism page before trusting any bundled repo scripts.
SKILL.md
READMESKILL.md - Antv G2 Chart
## 内置动画类型速查 | 动画名 | 效果 | 适合场景 | |--------|------|---------| | `fadeIn` | 从透明到不透明 | 通用入场 | | `fadeOut` | 从不透明到透明 | 通用退场 | | `scaleInX` | 从 X 轴起点缩放展开 | 柱状图入场 | | `scaleInY` | 从 Y 轴底部缩放展开 | 柱状图入场（竖向） | | `scaleOutX` | 向 X 轴收缩消失 | 柱状图退场 | | `scaleOutY` | 向 Y 轴收缩消失 | 柱状图退场 | | `growInX` | 从左向右生长 | 条形图、折线图入场 | | `growInY` | 从下向上生长 | 柱状图入场 | | `waveIn` | 波浪扫描入场 | 极坐标图（玫瑰图、饼图） | | `zoomIn` | 从中心缩放放大 | 点图入场 | | `zoomOut` | 向中心缩小消失 | 点图退场 | | `pathIn` | 路径逐步绘制 | 折线图、路径图 | | `morphing` | 形状变形过渡 | 图表类型切换 | ## 最小可运行示例 ```javascript import { Chart } from '@antv/g2'; const chart = new Chart({ container: 'container', width: 640, height: 480 }); chart.options({ type: 'interval', data: [ { genre: 'Sports', sold: 275 }, { genre: 'Strategy', sold: 115 }, { genre: 'Action', sold: 120 }, { genre: 'RPG', sold: 98 }, ], encode: { x: 'genre', y: 'sold', color: 'genre' }, animate: { enter: { type: 'growInY', // 入场动画：从下向上生长 duration: 800, // 持续时间（毫秒） delay: 0, // 延迟 easing: 'ease-out', // 缓动函数 }, }, }); chart.render(); ``` ## 配置动画的三个时机 ```javascript chart.options({ type: 'interval', data, encode: { x: 'x', y: 'y', color: 'type' }, animate: { // 入场：图表首次渲染时 enter: { type: 'scaleInY', duration: 1000, easing: 'ease-out-bounce', }, // 更新：数据变化时 update: { type: 'morphing', duration: 500, }, // 退场：图元被移除时 exit: { type: 'fadeOut', duration: 300, }, }, }); ``` ## 禁用动画 ```javascript // 禁用所有动画 chart.options({ animate: false, }); // 仅禁用入场动画 chart.options({ animate: { enter: false, }, }); ``` ## 常见动画组合推荐 ```javascript // 柱状图：growInY 入场 animate: { enter: { type: 'growInY', duration: 800 } } // 折线图：pathIn 入场（路径绘制效果） animate: { enter: { type: 'pathIn', duration: 1200 } } // 饼图（极坐标）：waveIn 入场 animate: { enter: { type: 'waveIn', duration: 1000 } } // 散点图：zoomIn 入场 animate: { enter: { type: 'zoomIn', duration: 600 } } // 通用淡入 animate: { enter: { type: 'fadeIn', duration: 500 } } ``` ## 常见错误与修正 ### 错误 1：animate.enter 写成字符串 ```javascript // ❌ 错误：enter 不是字符串，是对象 chart.options({ animate: { enter: 'fadeIn' }, // ❌ }); // ✅ 正确 chart.options({ animate: { enter: { type: 'fadeIn', duration: 600 } }, // ✅ }); ``` ### 错误 2：在极坐标图用非极坐标动画 ```javascript // ❌ scaleInX/Y 在极坐标中效果不对 chart.options({ coordinate: { type: 'theta' }, animate: { enter: { type: 'scaleInY' } }, // ❌ 饼图应该用 waveIn }); // ✅ 极坐标图推荐 waveIn chart.options({ coordinate: { type: 'theta' }, animate: { enter: { type: 'waveIn', duration: 1000 } }, // ✅ }); ``` --- id: "g2-animation-keyframe" title: "G2 关键帧动画（timingKeyframe）" description: | timingKeyframe 是 G2 v5 的组合类型，将多个图表视图按时序播放， 实现数据故事讲述（data storytelling）效果。 每个子视图是一个"关键帧"，系统自动在帧间插值过渡，支持形变动画（morphing）。 library: "g2" version: "5.x" category: "animations" tags: - "timingKeyframe" - "关键帧" - "数据故事" - "keyframe" - "morphing" - "动画" - "composition" related: - "g2-animation-intro" - "g2-core-view-composition" use_cases: - "演示数据如何从一种图表类型变为另一种（柱状图 → 折线图）" - "展示数据随时间的演变过程" - "数据新闻和可视化故事讲述" difficulty: "advanced" completeness: "full" created: "2025-03-24" updated: "2025-03-24" author: "antv-team" source_url: "https://g2.antv.ant