格子越深,表示该主题在这项指标上越高。
清晰86
说服88
密度65
制作成本50
作业适配40
工作适配96
低高
简短问答
什么时候选季度报告视觉效果?
故事符合「经理、创始人、学生俱乐部财务主管」时选用。
什么时候避开?
遇到「将每个 KPI 都塞到一张幻灯片上,以免遗漏」就换形式。
谁发明或推广了它?
咨询瀑布文化与开放图表库的结合
它编码什么?
桥 + 趋势 + 带有共享调色板的标注堆栈
广告能用吗?
在微信、抖音与展示广告里主张能一眼看见就可以;否则把图放在落地页。
老师会收吗?
实验报告与展板里有轴、单位、来源一行就可以。
季度报告视觉效果把值编码为桥 + 趋势 + 带有共享调色板的标注堆栈。咨询瀑布文化与开放图表库的结合。
工作报告、广告与作业中适合「经理、创始人、学生俱乐部财务主管」。若「将每个 KPI 都塞到一张幻灯片上,以免遗漏」,换一种形式。
软件
- Apache ECharts — 实时包的仪表板级图表。 · Apache-2.0 · github.com/apache/echarts
- Chart.js — HTML 导出的轻量级趋势。 · MIT · github.com/chartjs/Chart.js
- Mermaid — 流程或组织变更如附录中的文本图所示。 · MIT · github.com/mermaid-js/mermaid
- Color.js — 验证深色主题幻灯片的对比度。 · MIT · github.com/color-js/color.js
- Waterfall demo — 打印安全桥图教学标记。 · CC0 examples · github.com/Tool-Lifes/viz-atlas
导出
- 导出 1 — SVG
- 导出 2 — PDF
- 导出 3 — 把 EMF/SVG 放进幻灯(不要截图)
- 导出 4 — 网页用 SVG,印刷用 PDF
无障碍
- 无障碍 1 — 不要只靠色相。叠上纹理、标签和位置。
- 无障碍 2 — 正文对比 4.5:1,大标记 3:1。
- 无障碍 3 — 图上写短替代文本。数字也做成 HTML 表。
- 无障碍 4 — 动效只用于强调。尊重 prefers-reduced-motion。
季度报告视觉效果:守住桥 + 趋势 + 带有共享调色板的标注堆栈,「将每个 KPI 都塞到一张幻灯片上,以免遗漏」时换图。