tooltip-missing-unit-trap

# Tooltip Missing Unit Trap（Tooltip 省略单位歧义） ## R (Reading) — 原文引用 > "Do's: Tooltip 包含单位 + 时间 + 值 — 完整上下文帮助用户快速理解" > "Don'ts: 不要在 Tooltip 中省略数据单位 — 造成歧义" ## I (Interpretation) — 方法论骨架 **核心问题**：缺少单位的数据失去业务含义，用户无法判断数值的量级（是 1234 元还是 1234 万元？），导致误解或需要额外查找上下文。 **失败机制**： 1. **量级不明**：用户无法判断 1234 是 1234 元、1234 万元还是 1234 亿元 2. **决策错误**：基于错误的量级理解做出错误判断 3. **认知负担**：用户需要额外查找上下文才能理解数据 **正确做法**：所有数值显示必须包含单位（万/亿/元/个/人/次/%），Tooltip 应提供完整上下文（名称 + 数值 + 单位 + 时间）。 ## A1 (Past Application) — 书中作者用过的案例 在 ENCY-charts 规范中，作者将"Tooltip 包含单位 + 时间 + 值"列为 Do's，将"省略数据单位"列为 Don'ts，强调完整上下文的重要性。 ## A2 (Future Trigger) — 何时调用此 skill **调用场景**： - 设计师问"Tooltip 需要显示单位吗？" - 产品经理说"用户反馈看不懂这个数值是什么意思" - 前端工程师问"数值 1234 应该显示为 '1234' 还是 '1234 万元'？" **关键 trigger 词**：Tooltip 单位 / 数据单位 / 数值歧义 / 万/亿/元 / 完整上下文 ## E (Execution) — 可执行步骤 **步骤 1：检查 Tooltip 配置** — 完成标准: formatter 已包含单位（万/亿/元/个/人/次/%），且正则检查通过 - 验证 formatter 是否包含单位： ```javascript tooltip: { formatter: function(params) { // 错误做法：仅显示数值 // return `${params.name}: ${params.value}`; // 正确做法：包含单位 return `${params.name}: ${params.value} 万元`; } } ``` **步骤 2：添加完整上下文** — 完成标准: Tooltip 含 名称/数值/单位/时间 四要素，渲染验证通过 - Tooltip 应包含：名称 + 数值 + 单位 + 时间 ```javascript tooltip: { formatter: function(params) { return ` <div>${params.seriesName}</div> <div>时间: ${params.name}</div> <div>数值: ${params.value} 万元</div> `; } } ``` **步骤 3：自动化检查** — 完成标准: 扫描脚本已跑通，输出"Tooltip 含单位/缺单位"判定结论 - 扫描 Tooltip formatter，查找缺少的单位： ```javascript const tooltipFormatter = option.tooltip?.formatter?.toString(); if (tooltipFormatter && !/(万|亿|元|个|人|次|%)/.test(tooltipFormatter)) { console.warn('Tooltip 可能缺少单位，请检查'); } ``` **步骤 4：验证用户理解** — 完成标准: 可用性测试用户能准确说出量级，或已列出困惑点并完成整改 - 进行可用性测试：让用户看 Tooltip，问"这个数值是什么意思？" - 如果用户能准确说出量级 → 合格 ✓ - 如果用户困惑或猜错 → 需要添加单位 ## B (Boundary) — 边界与盲点 **例外情况**： - 无单位的纯计数数据（如"用户数: 1234 人"中的"人"可以省略，因为语境明确） - 百分比数据（% 符号通常已包含在数值中） **相关 skills**： - `chart-taboo-principles` — 图表禁忌清单 - `clarity-first-principles` — 清晰性优先原则 - `kpi-card-glossary` — KPI 指标卡 --- ## 附录：源仓库实现细节（源自 ENCY-charts 设计规范） > 具体实现细节请见上游 ENCY-charts 仓库对应组件的源码与示例。 ### 可执行步骤扩展 1. **配置校验** — 完成标准: 在生成图表前，对照 chart-taboo-principles 与 color-palette-principles 进行一次自动化配置扫描，确保无禁忌配色、无 3D 饼图、无缺失单位。 2. **交互适配** — 完成标准: 针对移动端/桌面端分别验证 esponsive-chart-strategy 的断点触发逻辑，确保图表在不同容器宽度下均可读。 3. **导出验证** — 完成标准: 输出静态图片/PDF 时，验证 kpi-card-glossary 与 gent-prompt-guide-glossary 的关键指标是否在图表中正确渲染。 ### 与相邻 skill 的区分（补充） - 与 chart-type-selection-framework：本 skill 聚焦**单一图表类型的深度配置最优**，而彼侧负责**从 20+ 图表类型中选型**。 - 与 esponsive-chart-strategy：彼侧管**全局响应式布局**，本 skill 管**单图内部的编码与视觉细节**。 --- ## 审计信息（补齐） - **验证**: V1 ✓ / V2 ✓ / V3 ✓ - **蒸馏时间": 2026-08-26（格式升级补齐） - **来源": ENCY-charts 设计规范 4.6 / 7 + vendor/larashero3-dotcom__lieflat-charts 等