| name | frontend-dataviz |
| description | 根据用户提供的数据生成符合 Storytelling with Data（SWD）原则的可视化图表。 触发条件：用户提供数据并要求"画图"、"生成图表"、"可视化"、"做个图"、 "帮我展示这些数据"，或上传 CSV/Excel/表格数据并希望看到图形化呈现时， 必须使用本 skill。即使用户只说"帮我分析这些数据"而数据适合可视化， 也应主动使用本 skill 生成图表。
|
Data Visualization Skill（SWD 原则）
核心理念
遵循 Cole Nussbaumer Knaflic 的 Storytelling with Data 六大原则：
- 理解背景 — 谁是受众？他们需要做什么决策？
- 选择合适图表 — 见下方图表选择矩阵
- 消除杂乱 — 删除所有不传递信息的元素（网格线、3D 效果、不必要的边框）
- 引导注意力 — 用颜色/粗细/位置突出关键信息，其余降至背景色
- 像设计师一样思考 — 对齐、留白、层次
- 讲述故事 — 图表标题应是洞察，而非描述（"Q3 销售额下降 18%" 而非 "Q3 销售额"）
Step 1：数据分析
拿到数据后，先判断图表类型：
| 目的 | 推荐图表 |
|---|
| 比较类别 | 条形图（横向更易读标签） |
| 展示趋势 | 折线图 |
| 展示构成 | 堆叠条形 / 瀑布图 |
| 展示相关性 | 散点图 |
| 展示分布 | 直方图 / 箱线图 |
| 部分与整体 | 仅当类别 ≤5 时用饼图，否则用条形 |
Step 2：用 ask_user_input_v0 工具向用户提问
必须在生成任何图表前，使用 ask_user_input_v0 工具一次性提出以下两个问题。
ask_user_input_v0({
questions: [
{
question: "颜色风格？",
type: "single_select",
options: [
"专业商务（极简灰+强调色）",
"社交媒体（鲜艳多彩，高饱和）"
]
},
{
question: "是否使用拟物图表（pictograph）？",
type: "single_select",
options: [
"普通图表",
"拟物图表（用实物图标代替条形）"
]
}
]
})
Step 3：生成图表（HTML + Chart.js）
输出统一使用 HTML Artifact，内嵌 Chart.js（从 cdnjs 加载）。
颜色风格映射：
- 专业商务 → 灰色基调 +
#2563EB 单强调色，其余数据点全灰 #D1D5DB
- 社交媒体 → 高饱和多色方案，见
references/color-palettes.md
拟物图表： 用户选择后，使用 SVG Pattern + Chart.js canvas 实现，见 references/pictograph-icons.md
SWD 视觉规范（必须遵守）：
网格线：极浅灰 #F3F4F6 或隐藏
边框：chart border 设为 none
图例：仅必要时显示，放在图表上方（自定义 HTML，不用 Chart.js 默认）
标题字体：加粗，16-18px；标签：12-13px #6B7280
柱间距：categoryPercentage: 0.6, barPercentage: 0.75
图表标题规范：
- ✅ 洞察型："华东区 Q3 营收同比下降 18%，拖累全国整体表现"
- ❌ 描述型："各区域 Q3 营收对比"
完整代码示例见 references/chart-examples.md
Step 4：输出检查清单
参考文件
references/color-palettes.md — 配色方案references/pictograph-icons.md — 拟物图表 SVG 图标库references/chart-examples.md — HTML + Chart.js 完整示例
