把结果变成一张图

1.1本章成品：一页纸的成果

成品是一个 .html 文件，双击打开就是一页：最上面一句结论，中间两张图，最下面一行写清数据从哪来、什么时候统计的。不联网也能看，手机上也读得了，可以直接投影。

这一页的用途很具体：期末答辩时投影出来的第一屏。做完这一页，你也就想清楚了自己的作品最后要给人看什么。

1.2这份数据长什么样

原料是一张汇总表：三个班、六个月的读书活动参与人次。一行一个月，一列一个班。

这张表里其实藏着两个可以说的事实：各班之间差多少（看最后一行），逐月怎么变化（看每一列的走势）。两件事需要两种图，这就是成果页上放两张图的原因。

1.3同一组数字，两张图

下面两张图用的是同一组数字：268、292、315。一个数都没改，只把纵轴的起点从 0 抬到了 250。

柱子上标的数字完全相同，柱子的长度不同

两句话不可能都对。真实情况是：最低的班是最高的班的 85%；而在右边那张图上，最矮的柱子只有最高柱子的 28%。

打开 第15章演示_抬基线.html，拖动那根滑块，看着柱子在你眼前变形。页面上还有一个"遮住数字"的开关，先遮住只看形状问一遍，再放开数字看一遍。

1.4本章新技巧：让它帮你做减法

大模型的默认倾向是往上加。要一张图，它加渐变、阴影、圆角、入场动画；说想做个记账的，它能给你规划出会员体系和数据大屏。加出来的东西不一定难看，问题在于它们一样也不承载数据，却实实在在增加了读图和维护的成本。

所以本章两处都要用减法：一处砍图上的装饰，一处砍期末选题的功能。用法是同一个：让它扮演一个只做减法的角色，明确禁止它添加任何东西，并且要求它逐条说明"删掉之后读者会不会少知道一件事"。

1.5可直接复制的提示词

第一段里的几条要求，分别对应后面要讲的知识点：

1.6大模型的常见偏差

默认往图上加装饰。　渐变、阴影、三维、圆角、入场动画。这些一样也不增加信息，只增加读图成本，也让文件更容易出问题。"不要加渐变、阴影、三维效果、动画和背景图"这句要写全。

自动把纵轴调成好看的范围。　它会"优化"坐标范围让差距看起来更明显，出发点是让图更有冲击力，结果就是误导。柱状图从 0 起这一条必须写明，拿到代码后还要再核对一次。

引入需要联网的图表库。　这是本章最需要防的一种。用外部图表库做出来的页面在你机器上完全正常，拿到没网的场合就是一片空白，而且不报错，你在台上才发现。

Python 路线不处理中文。　它给的绘图代码默认不设中文字体，出来是一排方块。要在提示词里写明系统与可用的字体名，或者要求代码里自动从几个候选中挑一个可用的。

/* ============ 数据区：改这里，两张图跟着变 ============ */
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;

  // 网格线与刻度，从 0 画起
  for (let v = 0; v <= max; v += step) {
    svg.appendChild(el('line', { x1: pad.l, y1: y(v), x2: W - pad.r, y2: y(v),
      stroke: v === 0 ? INK : LINE, 'stroke-width': v === 0 ? 1.4 : 1 }));
  }

  // 每个数据画一根柱子
  labels.forEach((label, i) => {
    svg.appendChild(el('rect', { x: cx - bw / 2, y: y(values[i]),
      width: bw, height: ih - (y(values[i]) - pad.t), fill: GREEN }));
  });
}

4.1演示步骤

4.2以终图定功能

成果页做完，期末选题就好定了。方法是把顺序倒过来：先画出作品最后要给人看的那张图，功能清单自然就收敛了。图上没有的东西，功能就不用做。

为什么这样有效：对着一份功能清单砍需求，每一条看起来都有用，砍谁都心疼。而对着一张图砍，问题变成了一个事实判断：这个功能产出的数据，在图上占哪一块。占不到的，这次就不做。

打开 第15章演示_以终图定功能.html，先在终图上勾选你要显示的东西，页面会反过来算出你必须做哪几个功能，以及哪几个可以先不要。

4.3开题卡：五项，缺一项不算开题

5.1三个题目，任选其一

三个题目都要求成果是单文件、双击可看、断网可看，并且四项说明要素齐全。数据可以自备，也可以用演示件里那份。允许更换题材。

5.2上机六步

前四步做成果页，后两步定期末选题。顺序不能反。

5.3共同验收标准

5.4常见错误与处理

5.5提交内容

提交方式：按教师提供的作业模板填写，文档开头注明所选题目。提交渠道见课堂通知，当堂提交。

5.6再进一步（选做）

给成果页加一个切换：同一份数据，一个按钮在"从 0 起"和"从 250 起"之间切换，让看的人自己点一下，亲眼看着柱子变形。

做完会碰到一个需要判断的问题：这个功能到底该不该放进正式的成果页。它把误导的手法展示了出来，对读者是提醒；但它也让页面多了一个与数据无关的交互，按本章的减法准则，第一个该删的就是它。同一个元素，在教学材料里该留，在汇报材料里该删，取决于这一页是给谁看的。