第10课：数据可视化 —— 用图表讲故事

📈 一图胜千言！同样的数据，用表格看要半天，用图表一眼就懂。今天我们要学会把数据变成图表！

⏱️ 预计用时：55 分钟

学习目标

学完这节课，你将会：

• 理解为什么数据可视化如此重要
• 认识常用的图表类型，知道什么数据该用什么图
• 学会用 Python 生成带有交互式图表的 HTML 页面
• 做出一个"我的一周数据分析"可视化报告

---

为什么需要图表？

先来做个实验。下面两组信息说的是同一件事，你觉得哪个更好懂？

方式A：纯数字

周一学习3小时，运动1小时，娱乐2小时，睡眠8小时
周二学习4小时，运动0.5小时，娱乐1.5小时，睡眠8小时
周三学习2小时，运动1.5小时，娱乐3小时，睡眠7.5小时
...

方式B：图表 一个彩色的柱状图，一眼就能看到周三学习时间最少、娱乐时间最多……

方式B 显然更清晰！这就是数据可视化的力量——把抽象的数字变成直观的图形，让人一眼就能看出规律和趋势。

小贴士

全世界最大的科技公司和媒体都在用数据可视化：天气预报的温度曲线、微信运动的步数柱状图、新闻里的疫情地图……你每天都在看数据可视化的成果！

---

图表类型指南

不同的数据适合不同的图表，选对图表是可视化的关键：

图表类型	适合展示什么	生活中的例子
柱状图	比较各项数据的大小	各科考试成绩对比
折线图	展示数据随时间的变化趋势	一学期成绩变化曲线
饼图	展示各部分占总体的比例	一天时间分配
雷达图	展示多个维度的能力	游戏角色属性图

选择原则很简单：

• 想比大小 → 柱状图
• 想看趋势 → 折线图
• 想看比例 → 饼图
• 想看全面能力 → 雷达图

想了解更多？

数据可视化是一个专门的学科，有很多经典书籍。最基本的原则是：准确、清晰、美观——准确是底线（不要误导），清晰是目标（一眼看懂），美观是加分（让人愿意看）。

坏的图表比没有图表更糟糕！比如用 3D 饼图会让比例失真，用太多颜色会让人眼花缭乱。简洁就是最好的设计。

---

我们的工具：Chart.js

今天我们用 Chart.js 来画图表。它是一个免费的 JavaScript 图表库，能画出漂亮的交互式图表。

你可能会问：不是在学 Python 吗，怎么又是 JavaScript？

好问题！我们的方案是这样的：

Python 处理数据 → 生成 HTML 文件 → HTML 里用 Chart.js 画图 → 浏览器打开看效果

这就是真实工作中常见的模式——用合适的工具做合适的事：

• Python 擅长处理和分析数据
• Chart.js（JavaScript）擅长在网页上画交互式图表
• 两者结合就能做出专业级的数据可视化

---

动手时间：我的一周数据可视化！

第一步：创建项目

mkdir my-week-viz
cd my-week-viz
claude

第二步：创建数据和基础图表

魔法咒语

用 Python 做一个"我的一周数据分析"可视化工具，要求：
1. 文件名叫 week_viz.py
2. 用字典存储一周的数据（可以让用户输入或用示例数据）：
   - 每天的学习时间（小时）
   - 每天的运动时间（小时）
   - 每天的娱乐时间（小时）
   - 每天的睡眠时间（小时）
3. Python 分析数据：
   - 计算各项的周总时间和日均时间
   - 找出学习时间最多和最少的日子
   - 计算学习/运动/娱乐/睡眠的总比例
4. 生成一个 week_report.html 文件，包含：
   - 页面标题"我的一周数据分析"和日期范围
   - 一个柱状图（Chart.js）：展示每天各项时间的分组对比
   - 一个饼图（Chart.js）：展示一周时间总体分配比例
   - 一个折线图（Chart.js）：展示每天学习时间的变化趋势
   - 每个图表下面有简短的文字分析
5. Chart.js 通过 CDN 引入（不需要安装）
6. HTML 页面要有现代感的设计：
   - 渐变背景
   - 白色卡片容器
   - 圆角和阴影
   - 每个图表一个卡片
7. 生成完成后自动在浏览器中打开

第三步：运行并查看

python week_viz.py

浏览器会自动打开一个包含三个图表的分析页面！

小贴士

Chart.js 的图表是交互式的——把鼠标移到图表上，会显示具体的数值。这是静态图片做不到的！

第四步：理解 Python 生成 HTML 的关键代码

看看代码中 Python 是如何生成 HTML 的：

用 f-string 把数据嵌入 HTML

# Python 变量
labels = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
study_hours = [3, 4, 2, 3.5, 4, 5, 2.5]

# 把数据嵌入 HTML/JavaScript
html_content = f"""
<script>
    new Chart(ctx, {{
        type: 'bar',
        data: {{
            labels: {labels},
            datasets: [{{
                label: '学习时间',
                data: {study_hours}
            }}]
        }}
    }});
</script>
"""

注意 f-string 里如果要写真正的花括号 {}，需要写成双花括号 ，因为单个 {} 会被当成变量插入。

用 Python 的 open() 写入文件

with open("week_report.html", "w", encoding="utf-8") as f:
    f.write(html_content)

这就是"Python 生成 HTML"的核心秘密——其实就是 Python 用字符串拼出一个完整的 HTML 文件，然后保存出去。简单但强大！

第五步：添加数据输入功能

魔法咒语

改进 week_viz.py：
1. 运行时让用户选择：
   A) 使用示例数据
   B) 手动输入自己的数据
2. 如果选 B，逐天逐项询问时间
3. 输入完成后，把数据保存为 week_data.json
4. 下次运行时，如果有 week_data.json，问用户要不要使用上次的数据

第六步：添加更多维度的图表

魔法咒语

继续增强 week_report.html 的可视化效果：
1. 加一个雷达图：展示这一周在"学习"、"运动"、"社交"、"创造力"、"休息"五个维度的表现
2. 加一个统计摘要卡片区域（CSS Grid 布局）：
   - 总学习时间（带图标）
   - 最勤奋的一天
   - 平均每天睡眠时长
   - 运动达标天数（假设每天至少1小时算达标）
3. 给页面添加深色模式支持（一个切换按钮）
4. 加上页脚：显示"由 Python + Chart.js 生成"和生成时间

---

今天学了什么？

概念	说明
数据可视化	用图表直观展示数据，让规律一目了然
柱状图	比较不同项目的数据大小
折线图	展示数据随时间变化的趋势
饼图	展示各部分占总体的比例
雷达图	多维度能力展示
Chart.js	一个免费的 JavaScript 图表库
Python 生成 HTML	用 Python 拼接 HTML 字符串并写入文件

最重要的一点：选对图表类型和使用合适的工具组合。Python 处理数据 + Chart.js 展示图表 = 专业级数据可视化！

1. 想展示一周内每天成绩的变化趋势，应该用什么图表？

2. 想展示一天中学习、运动、娱乐各占了多少比例，应该用什么图表？

3. 在我们的项目中，Python 和 Chart.js 各自负责什么？

4. 在 Python 的 f-string 中，如果要输出真正的花括号，应该怎么写？

---

挑战任务

1. 真实数据：记录你真实的一周数据，生成可视化报告，和爸妈一起看看你的时间分配
2. 班级成绩可视化：用上节课的成绩数据，做一个多科目成绩对比的柱状图
3. 天气可视化：手动录入最近一周的天气数据（温度、湿度），做一个天气趋势图
4. 多周对比：记录连续几周的数据，做一个"周与周的对比"图，看自己有没有进步

参考示例

本课的完整示例代码可以在这里查看：data-viz.py

下载后在终端运行：

python data-viz.py