数据图表的选择、坐标轴基线与说明要素
成果页顶部是一句结论，中间两张图，底部一行来源。口头结论分规模、分布、发现三句，每句都指得出来源。
| 月份 | 数据2301 | 数据2302 | 数据2303 |
|---|---|---|---|
| 3月 | 38 | 45 | 52 |
| 4月 | 42 | 48 | 55 |
| 5月 | 51 | 53 | 58 |
| 6月 | 47 | 50 | 54 |
| 7月 | 45 | 49 | 51 |
| 8月 | 45 | 47 | 45 |
| 合计 | 268 | 292 | 315 |
三个班、六个月的读书活动参与人次，同一人多次参加计多次。合计行看各班差多少，每一列看逐月怎么变，所以成果页放两张图。
| 句 | 回答什么 | ✓ 指得出来源 | ✕ 指不出来源 |
|---|---|---|---|
| 规模 | 一共多少 | 六个月共 875 人次，平均每月 146 人次 | “数据量比较大” |
| 分布 | 各部分怎么分 | 三个班分别是 268、292、315，最低的是最高的 85% | “各班分布比较均衡” |
| 发现 | 最值得说的一件 | 五月见顶之后连续三个月回落，八月三个班拉平到 45、47、45 | “数据显示大家都很积极” |
先写出图要回答的那一句话，再选图：比大小用柱状图，看变化用折线图，看占比用饼图或横向条形。占比接近时，饼图读不出差别。
柱状图、折线图、饼图等图形种类。选哪一种，由这张图要回答的问题决定。
一种图能读清数据的条件。饼图靠角度，类别超过五个或各类占比接近时读不出差别。
三个班的占比画成饼图
三块看着差不多，读不出谁多
比长度，不比角度
一眼看出 2303 最多
为了好看加透视
前排的扇形显得比实际更大
不加三维效果
图形大小与数值一致
画图就是映射：把数值按固定比例换算成长度、位置或角度。读者会把图上的视觉差异当成数值差异。
把数值换算成图形的规则。柱状图换算成长度，折线图换算成位置高低，饼图换算成角度。
/* ===== 数据区：改这里，两张图跟着变 ===== */ const DATA = [ { 月份: '3月', 数据2301: 38, 数据2302: 45, 数据2303: 52 }, // …中间四行省略… { 月份: '8月', 数据2301: 45, 数据2302: 47, 数据2303: 45 } ]; // 柱状图。纵轴一律从 0 起：柱子的长度就是数值本身 function drawBar(host, labels, values) { const W = host.clientWidth, H = 260; const pad = { t: 14, r: 10, b: 34, l: 40 }; const iw = W - pad.l - pad.r, ih = H - pad.t - pad.b; const max = 350, step = 50; // 轴上限与刻度间隔 const y = v => pad.t + ih - v / max * ih; // 映射：数值 → 纵坐标 const svg = el('svg', { viewBox: `0 0 ${W} ${H}` }); for (let v = 0; v <= max; v += step) { … } // 网格线与刻度，从 0 画起 labels.forEach((label, i) => { … }); // 每个数据画一根柱子 }
| 代码 | 作用 | 写错时 |
|---|---|---|
| const DATA = [ … ] | 数据区放在文件最上面，换数据只改这里 | 数据散在绘图函数里，换数据要翻遍文件，容易漏改一处 |
| const max = 350 | 纵轴上限写死，同一页几张图刻度一致，能直接比 | 按数据最大值自动算，每张图刻度不同，两张图没法比 |
| const y = v => … | 映射本身：数值除以上限，乘以画布高，从底部往上量 | 改成 (v - 250) / (max - 250)，画出来就是误导图 |
| for (let v = 0; …) | 刻度从 0 开始画，0 这条基线一定出现，并且加粗 | 从别的数开始，读者看不到基线，无从判断柱长代表什么 |
| viewBox: 0 0 W H | 一个绘图单位等于一个屏幕像素，窗口一变就重画 | 写成固定值，窄屏上 14 像素的字缩成 8 像素 |
柱状图的柱长就是数值，纵轴必须从 0 起。折线图看走势，纵轴可以不从 0 起，但起点要标在轴上。
| 班级 | 真实人次 | 占最高的比例 | 从 0 起的柱长 | 从 250 起的柱长 |
|---|---|---|---|---|
| 数据2301 | 268 | 85% | 85% | 28% |
| 数据2302 | 292 | 93% | 93% | 65% |
| 数据2303 | 315 | 100% | 100% | 100% |
柱长为实际测量值。从 0 起时，柱长一列与“占最高的比例”完全一致；从 250 起，映射公式变成 (v − 250) ÷ 70，268 只剩 18，315 剩 65，最高的柱子成了最矮的三倍多。
带刻度的横轴和纵轴，规定数值在图上的位置。
纵轴的起点，柱子从这里往上量。柱状图的基线必须是 0。
标注是真的，起点也写在轴上
读者先看形状，读出“2303 遥遥领先”
柱长与数值成正比
读出“三个班差不多”，与真实关系一致
AI 会把范围调得“好看”，让差距更明显
图更有冲击力，结果是误导
“柱状图的纵轴必须从 0 开始”
拿到代码再核对一次，最低刻度线标的是 0
一张图要带标题、单位、数据范围、来源四项。图被截图转发后，周围的文字跟不过去，四项是它身上仅剩的信息。
这张图说的是什么。例：各班学期总参与人次。
数字的量纲，如人次、元、分。例：单位：人次。
哪段时间、哪些对象。例：2026 年 3 月至 8 月合计。
数据从哪来、何时统计。例：书院读书活动签到记录，2026 年 9 月 1 日统计。
单位、时间、出处写在正文里
截图转发后被误读，没人敢引用
每张图带标题、单位、数据范围，底部写来源
截图单独拿出去也看得懂
颜色用来区分，要加标签，投影时对比要够。网页路线用内联 SVG 画图，Python 路线要指定中文字体。
颜色在图上用来区分。不只靠颜色：红绿色觉障碍在男性中约占 8%；浅灰、浅黄投影后常会消失。
绘图库默认字体不含汉字，中文画成空方框。与代码对错无关；网页路线由浏览器找系统字体，不会遇到。
记录形状与坐标，放大多少倍都清晰。网页路线画出来的就是它。
记录一格格像素，放大出现锯齿。投影用 PNG 时，导出分辨率不低于 150 dpi。
自己电脑上一切正常
没网的场合一片空白，而且不报错
不引用任何外部链接、字体或图表库
断网双击照常显示
AI 给的绘图代码默认不设中文字体
出图是一排方块
写明系统与可用的字体名，或要求代码从几个候选里挑一个可用的
中文正常显示
Python 路线的出图脚本，读取汇总数据画两张 PNG。把设置区的 USE_CHINESE_FONT 改成 False 再运行，中文变方块，终端出现下面这行提示。
UserWarning: Glyph 25968 missing from font(s) DejaVu Sans.
先画出作品最后要给人看的那张图，再由图反推功能。图上占不到一块的功能这次不做，核心功能不超过三个。
作品最后要给人看的那张图，也就是期末答辩投影出来的第一屏。
列出八条逐条砍，每一条看起来都有用
八个功能各做三成，交出来是八个半成品
逐个问：这个功能产出的数据，在图上占哪一块
三个功能各做十成，交出来一件可用的作品
AI 默认往上加：给图加装饰，给选题加功能。删一样东西之前先问它承载了哪一部分数据，答不上来的就删。
| 第一段里的规定 | 缺少时的表现 | 见 |
|---|---|---|
| ② 不引用任何外部链接、字体或图表库 | 断网时图表库加载不到，整张图空白，而且不报错 | 15.6 |
| ⑥ 柱状图纵轴从 0 开始 | AI 为了冲击力调整纵轴范围，差距被凭空放大 | 15.4 |
| ⑦ 折线图起点标在轴上 | 纵轴从 0 起，走势挤成一条平线 | 15.4 |
| ⑧⑨ 标题、单位、时间范围、来源 | 图被截出去转发后，读者不知道它在说什么 | 15.5 |
| ⑩ 数据写在最上面的数组里 | 换一批数据要翻遍绘图代码 | 15.3 |
| ⑪ 字号不小于 14 像素 | 手机上和教室后排读不清 | 15.6 |
| 不要加渐变、阴影、三维效果、动画和背景图 | AI 默认往图上加装饰，增加读图成本，文件也更容易出问题。这句要写全 | 本节 |
前四步做成果页，后两步定期末选题，顺序不能反。第 1 步那句结论写不出来，就不要往下走。
一句结论写在文档最上面，再定两张图的分工。后面五步都建立在这一句上
产出：一句结论与两张图的分工用第一段提示词生成。断网双击打开，图还在才算过；检查有没有 src、href、link 指向外部地址
产出：成果页与断网截图用第二段提示词。每删一样写一句理由，理由只能是“它没有承载数据”；AI 列出、你决定保留的，也写明为什么
产出：删减记录把柱状图纵轴起点抬高，截两张图放在一起，一句话写明两张图分别让人得出什么结论
产出：两张对照图与一句判断用第三段提示词砍到三个核心功能。对照第 1 步的图：图上要显示的不能砍，图上没有的先不要；不同意它砍的，写明理由保留
产出：AI 砍需求的原始记录按下表填齐五项，里程碑从答辩日往回排
产出：一张开题卡| 项目 | 要求 | 怎么检查 |
|---|---|---|
| 核心功能 | 不超过三个，每一个都能在终图上指出对应的那一块 | 指不出来的划掉，写进“这次不做”一栏 |
| 验收标准 | 不少于五条，格式是“在什么情况下，做什么操作，应该出现什么结果” | 逐条读一遍，出现形容词的即为不合格 |
| 路线 | 选定网页路线或 Python 路线，写明理由 | 理由要落在使用场景上，不能只写“我比较熟” |
| 里程碑 | 从答辩日往回排，至少留出三天缓冲 | 看最后一个里程碑与答辩日之间隔了几天 |
| 风险 | 一条已识别的风险与应对，具体到某一步会卡住 | “时间不够”不算，要写清哪一步、为什么、怎么提前防 |
五项缺一项不算开题。
图不对时，先按现象查到原因，再改出问题的那一处：提示词、数据区或映射那一行。
| 现象 | 原因 | 处理 |
|---|---|---|
| 写不出那一句结论 | 还没想清楚要给人看什么 | 对着汇总表，把最想让人知道的那件事写成一句话，再画图 |
| 双击打开一片空白，什么图都没有 | 用了需要联网的图表库，当前没网 | 要求改成内联 SVG，页面里不出现指向外部地址的 src、href 与 link |
| 图显示了，但数字对不上表 | 生成时数据被 AI 改过，或合计算错 | 拿汇总表逐个核对数据区的数字；改数据区，不改绘图代码 |
| 柱状图差距看着特别大 | 纵轴被自动截断 | 找到映射那一行，把起点改回 0，刻度也从 0 开始画 |
| 折线图几乎是一条水平线 | 纵轴从 0 起，数据集中在很窄的一段 | 把起点抬到数据下方一点，并标在轴上 |
| 手机上图里的字特别小 | SVG 整体被等比缩小，字号跟着缩 | 让 viewBox 跟随容器宽度，窗口变化时重画一次 |
| Python 出的图中文是方块 | 绘图库默认字体不含汉字 | 在代码里指定一个系统里装着的中文字体，并关掉负号的特殊处理 |
| 图放进文档很清楚，投影就糊 | PNG 导出时分辨率太低 | 导出时把 dpi 提到 150 以上，或者改用 SVG |
| 投影后浅色的线看不见 | 屏幕上好看的浅色，投出来对比不够 | 换成深色，每条线加上标签，不只靠颜色区分 |
提交四项内容，按八条标准验收；选做一项。
按教师提供的作业模板填写，文档开头注明所选题目；提交渠道见课堂通知，当堂提交。
零代码应用开发 · 第 15 章 把结果变成一张图