yang20040317-svg design-chart ｜ 数据可视化图表专项
本技能是 design-workflow 主技能抽离出的专项方法论，专治"把数据变成诚实、精致、可读的图表"。当任务输入是「数据」（表格/CSV/一组数字）且载体是图表页/HTML/报告时，独立触发或由主技能路由而来。 来源署名见
../references/来源署名/lieflat-charts.md（lieflat-charts 开源图表方法论 / AI 可视化 skill）。
核心信条
图表不是"画个图"，是把数据形状诚实地映射成视觉通道，并让读者一眼读懂唯一结论。每张图都要经得起三问：
- 每个视觉通道编码了什么数据维度？（无装饰性编码）
- 去掉颜色 / 简化后，结构是否仍读得懂？
- 这张图到底在讲哪一件事？
一、输出形式判定（图表 vs 报告）
- 图表（默认）：用户只给数据，或说"可视化/分析数据/做几张图/做个图表页"——产出单图或图表页。没有"报告"关键词时不得自行升级成报告。
- 报告（升级）：只有用户明确说"报告/年报/月报/白皮书/调研一页纸/海报/brief/dashboard 报告"等完整叙事交付，才读报告模板、按场景选版式、单页聚合多图。
- 有歧义仍选图表：只说"分析"但无报告关键词 → 先交付最强单图或 2–3 张证据图；可在文字中提示"如需完整报告可切换"，但不直接生成报告。（报告模式 ≠ "多画几张图"。）
- 报告内的图表仍遵守图表的数据契约：报告模板定整页结构，页内每张图独立选型。
- 语言：用户未指定时跟随输入语言；同版本内不混中英。
二、选型先于画图：数据形状是主键
别问用户要什么图，看他数据长什么样——数据形状决定可选图型，不是用户口中的图名：
- 类目比较（几个类谁高谁低）→ 柱状 / 条形
- 时间序列（随时间变化）→ 折线 / 面积
- 占比构成（部分占整体）→ 饼 / 环形 / 堆叠
- 带正负（增减盈亏）→ 双向条 / 正负柱
- 多对一归属（多个元素归到一个类）→ 树 / 力导向
- 网络 / 关系 → 节点图
- 逐条记录分布 → 散点 / 直方图
非程序员说人话（"把这季度转化画一下发公众号"），设计者职责是翻译成正确的图，且好看到能直接发出去。
三、一张图只承载一个独立结论
- 图数由独立结论数决定，不由"有多少数据列"：单指标 → 1 张最强图；2–3 结论 → 2–3 张；文章/案例 → 4–6 张；用户明确数量按用户。
- 默认单页 ≤ 6 张；两图讲同一结论只留场合更合适、契约更诚实的一张。候选对比稿不计入成品图数。
四、标题写结论，不写图型名
- "Where we gained, where we bled" 优于 "柱状图"；更好是带判断的标题。
- 副标题说清图例·单位·时间范围（读者不看代码只看这一行）。
五、两种阅读速度（按场合选，不按静态/交互分）
| 细读型 | 快读型 | |
|---|---|---|
| 基本单元 | 记录（一点=一条数据） | 形状（粗柱/大数/色块） |
| 线条 | 发丝级 | 2px+ 粗 |
| 聚合 | 摊开原材料、拒绝预聚合 | 提前聚合给结论 |
| 读法 | 凑近读 30s+ | 扫一眼 <10s |
| 场合 | 年报/对外故事/海报/论文 | 周报/dashboard/监控/随手贴 |
默认先细读型：无明确"三秒快读/dashboard"场合时，不从快读型起步；只有细读型无合适模板、或用户明确要快读时，才降级到快读型（并写明细读型为何不适配）。
六、视觉编码诚实性（红线）
- 长度∝数值：柱/条长度严格正比于数值；柱状图不断轴——断轴毁掉"长度即值"的契约。极端值场景的正确做法：①让极端值冲天（最诚实）②主图+放大镜小图 ③撕柱不撕轴（并明说画不下）。
- 面积用 sqrt 换算：涉及半径/面积的编码，半径 = sqrt(v) 再乘比例，不得拿数值直接当半径（面积∝值²会放大差异）。
- 明度即数据：单色系里最重要=最黑（暗底反转为最亮）；多系列按重要性沿灰阶分配，不按出现顺序随便拿。颜色承载语义，不是装饰。
- 数值∝视觉严格成正比：重绘两次同一数据图形长得一样（示例数据用确定性伪随机，禁用非确定性随机）。
七、色彩语义（单色系优先）
- 同一份交付只用一种色彩系统：灰阶 / 一套有序明度阶 / 一套分类色 / 一套带强调色的体系，四选一，不混用。
- 类目 > 6 时退回灰阶（彩色容量不足）；颜色不能成为唯一线索——去掉颜色后结构仍读得懂（色盲友好）。
- 强调色只给一个主角，第二个主角会消解强调。
- 颜色必须连接真实维度（序数梯接数值、分段色接月份/区段、分类色接类目），底注写清编码了什么。
八、图表语境下的关系规则（CRAP 变形）
- 对比：用明暗/长短/冷暖反差制造焦点，而非"差不多"的近似色。
- 对齐：坐标轴/刻度/基线共基准；同类图型同一网格节奏。
- 亲密性：相关数据（图例·时间范围·单位）聚在副标题一处，不与图分离。
- 图底：网格线/发丝线低存在感，主体数据从中跳出；暗卡（深色底）只给"必须暗底衬托"的形，且每屏限 1 张。
九、交互三问（决定静态还是可交互）
- 元素背后有没有一条真实记录？没有（纯装饰/肌理）→ 禁止加交互，给无内容元素加 hover 是欺骗。
- 有记录 → 不点能不能读出？元素 < 50 且两端有标注 → 静态够用，hover 锦上添花。
- 元素 > 50 或多段路径 → 必须 hover/pin，否则只是氛围图。
十、库外新图 = 现场造句（抄形不抄魂 = 白做）
用户要的图不在已知图型里（或给参考图）时：
- 先答"本体"——每个视觉通道编码了什么数据维度？答不出就问用户拿数据结构。
- 找数据形状最近的已知图型当骨架。
- 用统一视觉 token 造句（不发明新颜色新字号），产出要"一眼一家人"。
- 过本层与形式层的硬规则。
十一、敢于说不（边界）
- 断轴柱、发光/玻璃拟态/3D、多色相画单序列、类目>6 还彩色、未明确要地图就因数据含地区字段自动用地图——全部拒绝并给诚实替代。
十二、图表交付自检清单（完稿前逐条核）
- 数值∝视觉：柱没断轴？面积编码用了 sqrt？长度/角度/明度与数值严格成正比？
- 色板受控：整份/同组交付只用了一种色彩系统（灰阶 / 单一预设 / 单一 custom）？无跨系统混色？
- 标签不重叠：邻近峰值/密集类目标签是否强制最小间距，无相互压字？
- 最小字号踩线：半宽卡 ≥6.5px、通栏/大图 ≥5.5px？装不下的信息改 hover 出，未缩小字号硬塞？
- 确定性数据：示例数据用确定性伪随机，刷新两次长得一样？
- 动效降级：reveal（滚入播+点击重播）正常？带
prefers-reduced-motion降级？ - 卡片四件套：结论式标题（非图型名）+ 副标题（图例·单位·时间）+ 图 + 来源行（全大写加字距）齐全？
- 全量候选审计：是否写下 ≥3 个候选图型及淘汰理由（不只是"采用了哪个"）？是否先从细读型审计、必要时才降级快读型？
- 一图一结论：每张图是否只承载一个独立结论？重复结论的图是否已合并/删减？
- 同组不重复：一页多图是否模板/轮廓轮换、未全变成同一种径向/横条、暗卡未过量？
- 地图显式触发：仅用户明确要地图才用；数据含地区字段未自动触发地域着色？
- 交互诚实：纯装饰元素未加 hover；>50 元素才要求可交互？
- 放回检验：这张图放回所选"图型家族"旁，是否同一套视觉语法，而不只是"风格有点像"？
边界与维护
- 本技能只管"数据→图型"的选型、编码诚实与品味，不绑定任何图型库/引擎（ECharts / Chart.js 等仅为实现手段，本技能不依赖）。
- 具体 hex 色值、平台名、图型编号等实现层细节不内嵌（见来源署名红线）。
- 若要在通用设计流程里用：由主技能
design-workflow在载体=图表页/报告页时路由到本技能。