数据可视化速成：让班级数据自己开口说话

一句话结论：数据可视化不是「画得好看」，是「让人 3 秒看懂」。图选对了，家长会不用你说第二句。

先看效果（动图可交互）

这是同一份班级数据做出来的可视化大屏——数字滚动、图表动画，家长会投屏的杀伤力：

→ 点开真货操作一下（演示数据）

三种图，各管一件事（选图口诀）

记不住就反过来问 AI：「我想表达___，用什么图最合适？」

傻瓜话术：一句话出图

读取这份成绩表，生成一个网页图表报告：
1. 各科平均分 → 柱状图（带数值标签）
2. 前后两次考试对比 → 分组柱状图
3. 分数段人数 → 环形图
要求：单文件 HTML、深色大屏风格、能投屏、数据存本地。
输出 html 版本给我即可。

进阶：想要「会动的图表」就加一句「加载时数字滚动、图表有入场动画」——上面的大屏就是这么来的。

别让图表骗人（老师的基本功）

AI 画图很快，但这三个坑它自己不会躲：

1. 截断的 Y 轴：柱状图 Y 轴不从 0 开始，差距会被放大 10 倍——检查坐标轴起点；
2. 过密的标注：一个图塞 30 个数据标签，等于没标——让它「只标最大最小和均值」；
3. 双色渐变误导：颜色越花越像广告——要「单色系 + 一个强调色」。

验收一句话：把图给一个不懂你班情况的人看 3 秒，问他看出了什么——他说出的就是你这张图真正说了什么。

班级场景速查

• 考试后：各科雷达图（一眼看出弱科）
• 家长会：进步折线图（增值视角，不只排名）
• 期末总结：学期数据 H5（参考创意工坊的「班级年度报告」点子）
• 日常：作业提交率周报柱状图（自动生成可接自动化）

检查点

• 能按「想说的话」选对图
• 用话术生成过一张可投屏的图表页
• 检查过 Y 轴起点和数据标签密度

上一课：成绩分析与增值评价 ｜ 延伸：用 HTML 讲概念