pinvou 数据分析可视化
把结构化数据、表格汇总、业务指标或用户描述的数据口径转成可交付的 HTML 数据可视化仪表盘。
成功判定
一次合格交付必须同时满足：
- 已读取
references/visualizer-design-system.md。 - 已用
write_file写出.html文件。 - 已用本技能目录下的
scripts/validate_visualizer_html.py校验最终.html，且结果为通过。 - 已调用
present_artifact(path, title)展示产物卡。 - HTML 使用 Chart.js UMD：
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js。 - 每个
<canvas>都有role="img"、描述性aria-label和 fallback text。 - Chart.js 默认 legend 关闭，并使用自定义 HTML legend。
- 数据先聚合再入图，展示数字经过合理四舍五入。
- 图表关键数值常驻显示，不只依赖 hover tooltip；数据密集时显示首尾、峰值、谷值或 Top N 等关键标签。
失败判定
如果发生以下任一情况，必须重写产物再交付：
- 使用 ECharts、Plotly、Vega、D3 伪地图或任何非 Chart.js 图表库，除非用户明确点名要求。
- HTML 中出现
echarts、Plotly、cdn.plot.ly、cdn.jsdelivr.net/npm/echarts。 - 直接在聊天正文粘贴完整 HTML，而没有写
.html文件和展示 artifact。 <canvas>缺少role="img"、aria-label或 fallback text。- 使用默认 Chart.js legend，而没有自定义 HTML legend。
- 图表数值只出现在 hover tooltip 中，画布上没有常驻数值标签。
- 使用彩虹渐变 KPI、重阴影、发光、深色 hero、emoji 或营销页式大标题。
- HTML/CSS/JS 中出现
<!-- comments -->、/* comments */或独立行// comments。 scripts/validate_visualizer_html.py返回失败。
必须先读
在执行任务前读取 references/visualizer-design-system.md，并遵守其中的 Chart.js、布局、配色、无障碍和流式输出规则。若任务很小，也至少遵守本文件的硬性规则。
交付方式
Pinvou 的聊天正文会转义或清理 <script>，所以不要把带 Chart.js 的 HTML 直接贴在普通回复正文里当最终成品。
必须按以下流程交付：
- 用
write_file写出一个.html文件，文件内容可以是完整可打开 HTML，必须包含可执行的 Chart.js 脚本。 - 用
exec_shell运行本技能目录下的校验器：python <visualizer-skill-dir>/scripts/validate_visualizer_html.py <artifact.html> --json其中<visualizer-skill-dir>是load_skill返回的 Source 所在目录。 - 如果校验失败，读取错误列表，重写
.html，再次运行校验器；不要展示失败产物。 - 只有校验通过后，才能调用
present_artifact(path, title)展示产物卡。 - 普通回复只保留简短说明，不重复粘贴整段 HTML。
触发边界
使用本技能：
- Excel/CSV/JSON/表格数据转图表、转看板、转可视化报告。
- 用户说“做数据可视化”“做图表”“生成看板”“数据仪表盘”“可视化图表”。
- 数据分析仪表盘、指标看板、可视化报告。
- 柱状图、折线图、组合图、散点图、热力图、图表卡片。
- 用户明确提到 Chart.js、canvas、数据可视化。
不使用本技能：
- 落地页、品牌页、banner、海报、简历、作品集等以视觉表达为主、没有数据图表核心诉求的任务。
- 需要真实地图但没有真实拓扑数据的任务；不要手绘伪地图。
- 需要在线查询最新数据但用户没有提供数据时，先说明需要数据源或使用可用查询工具获取数据。
数据纪律
- 不要编造真实业务数据。缺数据时先询问，或明确生成空模板/示例模板。
- 用户给出 Excel、CSV、JSON、表格或明细数据时，先做必要聚合，再写入图表。
- 所有展示数字都要四舍五入到合理精度。
- 图表解释写在普通回复中；HTML 产物内部只放视觉元素、必要标题、图例和简短标签。
HTML 产物硬规则
- 输出
.html文件，不输出 Markdown 包裹的 HTML。 - 使用 Chart.js UMD：
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js。 - 每个
<canvas>必须有role="img"、描述性aria-label和 fallback text。 - 默认 legend 必须关闭，使用自定义 HTML legend。
- 默认在图表关键数据点上常驻显示数值标签，不只依赖 hover tooltip；柱状图显示在柱体末端或顶部，折线图显示在关键节点附近，饼图/环图显示分类占比。数据密集时只显示首尾、峰值、谷值或 Top N 等关键标签，避免重叠；完整数值保留在图例或 KPI 卡中。
- canvas 外层 wrapper 设置高度，canvas 本身不直接设置高度。
- Chart.js 配置里使用硬编码 hex，不使用 CSS 变量。
- 页面视觉要扁平、紧凑、无渐变背景、无阴影、无深色外层容器。
- 不写 HTML 注释、CSS/JS 块注释或行内叙事注释。
- 不写独立行
//注释；生成脚本内也不要把解释性注释复制进最终 HTML。 - 不使用 emoji；需要图形标识时用 CSS 小色块或简洁 SVG。
- 字号保持紧凑：h1 15px、h2 14px、h3 13px、正文 13px；只使用 400 和 500 字重。
- 推荐结构：2-4 个 KPI 卡片、1 个宽趋势图、1-2 个辅助对比图、每个图表上方放自定义 legend。
- HTML 内只放视觉元素、标题、图例和必要标签；详细分析写在普通回复中。
- 若引用完整规范与本文件冲突，以本文件的交付方式为准。
交付前机器校验
本技能自带校验器 scripts/validate_visualizer_html.py，用于拦截常见违规项，包括注释残留、ECharts/Plotly、缺失 Chart.js UMD、canvas 无障碍缺失、默认 legend 未关闭、缺少自定义 legend、渐变/阴影/模糊/发光、异常字重、过小字号和 emoji。
校验器失败时必须按错误逐项修复并重跑，直到输出 ok: true 或文本 OK visualizer artifact。不要把“校验失败但看起来可用”的 HTML 交付给用户。