# 柱状图生长（Bar Chart Grow）

镜语 · 特效与转场 / 标注与数据

- 别名：数据柱状图动画、柱子长高、图表生长
- 口语：「数据柱子一根根往上长，上面数字跟着跳」「做个图表动画讲数据」
- 一句话：柱子从基线依次长高，数值同步递增到最终结果
- 是什么：柱状图生长让每根柱子从基线开始长到对应高度，数值标签同步从 0 递增。生长顺序可以按类别依次进行，最后再强调需要观众记住的那一项
- 缺了就不像：柱子从基线长到最终高度；数值与柱高同步；纵轴从 0 开始
- 加了更像：依次错开；只强调一项；结束后弹出结论
- 适合用在：知识、财经、科普视频中展示调查或统计结果；账号复盘中对比不同内容的播放量；带货对比不同规格的参数
- 看哪里：柱子都从同一条底线往上长，后一根比前一根稍晚开始；上方数字跟着柱高一起增加，最高的一根用橙色区分，最后出现「占比最高」提示
- 注意：生长时长过长，观众在等结果；动画中途的数值不是真实数据，不要暂停在中间截图使用；纵轴不从 0 开始会夸大差异；示意数据需要标明，不能冒充真实调查
- 描述示例：深色背景上的竖向柱状图，5 根柱子从共同基线依次向上生长，每根错开约 0.1 秒，顶部百分比数值同步从 0 递增到最终值；最高一项用橙色、其余用低饱和蓝灰色，生长结束后在最高柱上方弹出「占比最高」标签；标注「示意数据」
- 易混：
  - [数字递增](https://idea.ameng.dev/terms/rolling-number.md)：数字递增只变化数字，柱状图生长同时展示多个类别的比较
  - [网格错峰](https://idea.ameng.dev/terms/staggered-grid.md)：网格错峰讲的是阵列入场节奏，柱子高度不表达数据
  - [章节进度条](https://idea.ameng.dev/terms/chapter-progress.md)：进度条表示时间或完成度，不比较多个类别

## 来源与延伸阅读

- [Financial Times · Visual Vocabulary 图表选择](https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary)
- [GSAP · Staggers 错峰动画](https://gsap.com/resources/getting-started/Staggers/)

网页版（含演示）：https://idea.ameng.dev/terms/bar-chart-grow