●指南 06
制作动态气泡、旭日、网络和甘特图
一步一步。
这四类图解决不同的问题，也要求不同的行结构。掌握气泡时间状态、层级路径、加权连接和任务排期的准确格式，再预览每种结构如何动起来。
动态气泡时间线
CSV 数据指引
先用正确的数据结构搭建
以这套可直接制图的字段结构为起点。替换示例行、保留列结构，并在导出前完整预览动态过程。
- 适用场景
- 气泡随周期平滑移动、缩放和重组，同时展示多个变量的时间变化。
- 必需字段
实体周期XY大小- 每一行代表什么
- 一个实体在一个周期中的状态，包括 X、Y 坐标和数值型气泡大小；每个周期都要重复该实体。
三步完成
- 1
保留上方展示的表头名称和列顺序。
- 2
每行添加一条观测，并统一名称、单位和周期。
- 3
预览全部帧，再调整标签、密度和动画节奏。
动态气泡时间线本地化 CSV 示例
实体,周期,X,Y,大小
北部,2021,22,64,38
南部,2021,48,36,62
东部,2021,71,72,44
西部,2021,84,28,26
北部,2022,31,69,46
南部,2022,52,43,70
东部,2022,66,78,51
西部,2022,77,35,34
北部,2023,39,75,58
南部,2023,59,51,77
东部,2023,72,83,63
西部,2023,69,44,42
北部,2024,47,81,72
南部,2024,66,60,86
东部,2024,79,88,75
西部,2024,61,53,55CSV 数据指引
先用正确的数据结构搭建
以这套可直接制图的字段结构为起点。替换示例行、保留列结构，并在导出前完整预览动态过程。
- 适用场景
- 多层圆环从中心向外依次展开，展示层级结构及各分支贡献。
- 必需字段
路径数值- 每一行代表什么
- 一条叶子节点路径及其数值；使用正斜杠分隔层级，例如“产品/核心/搜索”。
三步完成
- 1
保留上方展示的表头名称和列顺序。
- 2
每行添加一条观测，并统一名称、单位和周期。
- 3
预览全部帧，再调整标签、密度和动画节奏。
动态旭日层级图本地化 CSV 示例
路径,数值
产品/核心/搜索,28
产品/核心/工作区,22
产品/增长/自动化,18
产品/增长/洞察,14
服务/咨询/战略,12
服务/咨询/研究,9
服务/交付/上线,16
服务/交付/支持,11
合作伙伴/平台/云,13
合作伙伴/平台/数据,8CSV 数据指引
先用正确的数据结构搭建
以这套可直接制图的字段结构为起点。替换示例行、保留列结构，并在导出前完整预览动态过程。
- 适用场景
- 加权关系线逐步绘制，节点在力导向布局中动态就位。
- 必需字段
来源目标权重- 每一行代表什么
- 一条从来源节点到目标节点的连接；权重控制连线强度，并影响节点强调程度。
三步完成
- 1
保留上方展示的表头名称和列顺序。
- 2
每行添加一条观测，并统一名称、单位和周期。
- 3
预览全部帧，再调整标签、密度和动画节奏。
动态力导向网络本地化 CSV 示例
来源,目标,权重
产品,设计,8
产品,工程,10
产品,研究,6
设计,品牌,4
设计,增长,5
工程,数据,7
工程,平台,9
研究,数据,5
增长,销售,6
销售,支持,4
平台,支持,5
数据,洞察,7
洞察,增长,3CSV 数据指引
先用正确的数据结构搭建
以这套可直接制图的字段结构为起点。替换示例行、保留列结构，并在导出前完整预览动态过程。
- 适用场景
- 项目任务条沿统一时间轴依次展开，并动态显示各任务进度。
- 必需字段
任务开始结束进度- 每一行代表什么
- 一项任务及其数值型开始、结束位置和 0–100 的进度；结束值必须大于开始值。
三步完成
- 1
保留上方展示的表头名称和列顺序。
- 2
每行添加一条观测，并统一名称、单位和周期。
- 3
预览全部帧，再调整标签、密度和动画节奏。
动态甘特时间线本地化 CSV 示例
任务,开始,结束,进度
研究,0,3,100
战略,1,5,92
UX 设计,3,8,78
原型,5,10,65
工程,7,15,48
测试,13,17,32
上线,16,20,1201 教程
跟随工作流
新图表按顺序做完这些步骤，也可当作已有动画的检查清单。
- 01
先判断本地搜索意图
读者是在找教程、模板、导出参数，还是汇报案例；不同意图决定页面要优先讲步骤、格式或示例。
- 02
准备可替换CSV
保留一行表头、短标签、统一单位，去掉隐藏合计和说明行，让示例能直接替换成业务数据。
- 03
按问题选图表
先判断问题是排名、趋势、对比、占比、流向还是关系。只有当动态气泡时间线能让关系一眼看懂时才使用它。
- 04
写出最终画面结论
把结论、单位和时间范围放在图表附近，让最终帧在搜索结果、社媒封面或PDF里也能独立成立。
- 05
按阅读节奏调动画
在领先者、交叉点、异常值和最终值处放慢，动画要帮助用户理解，而不是变成装饰。
- 06
按发布场景导出
MP4或WebM用于动态展示，PNG用于PDF、邮件、搜索预览和不播放动画的场景。
02 视觉示例
试试这些图表模板
先比较运动和阅读方式，再决定格式。每个示例都是可编辑、由数据驱动的图表。
03 应用
相关场景
04 常见问题
常见问题
制作动态气泡、旭日、网络和甘特图适合谁看？
适合把CSV或表格数据做成动态图表的人，比如运营汇报、产品发布页、社媒内容和管理层演示。
应该先用哪种图表？
如果数据关系适合，就从动态气泡时间线开始；如果问题变了，先换模板，再调颜色和动画。
最终应该导出什么格式？
通用视频用MP4，网页可用WebM，短循环才用GIF，同时保留PNG最终帧做静态兜底。