visualizing-data（数据可视化）Skill 是什么？如何选对图表类型？

数据可视化Skill：用 24+ 图表类型，把数据讲成一个清晰的故事

它就是一本"图表选型说明书"：从"我的数据是什么类型"和"我想讲什么故事"两个问题出发，用决策树把你的数据特征直接映射到合适的图表类型，而不是凭感觉画图。
覆盖 24+ 种可视化类型，并按分析目的分层组织：比较、趋势、分布、关系、构成、流程、层次、地理空间，从基础条形图到桑基图、旭日图、力导向图都有对应指引。
自带可访问性与色盲安全方案：符合 WCAG 2.1 AA 标准，给出 3:1 / 4.5:1 对比度要求与 IBM 色盲安全调色板，避免"红绿搭配"这类常见坑。
按数据量给出性能策略：从 <1000 点走 SVG，到 1K–10K 采样、10K–100K 切 Canvas、>100K 服务端聚合，都有明确建议。
多语言落地示例：JavaScript/TypeScript 为主（Recharts、D3.js、Plotly），并覆盖 Python（Plotly、Matplotlib、Seaborn、Altair）等实现路径。

1. 该技能叫什么？如何一键安装 AI 技能提升开发效率？

技能中文名：数据可视化Skill 技能英文名：visualizing-data 技能ID：13378

它要解决的问题非常具体：“我有一堆数据，到底该画成什么图？”

现实中，这个问题经常被草率对待——产品经理要一个"炫一点的图"，工程师顺手拉一个饼图塞进仪表板，结果 12 个类别的数据挤在一张饼图里谁也看不清；或者图表只靠颜色区分系列，红绿色盲用户直接读不出信息；再或者十万条散点硬用 SVG 渲染，页面直接卡死。这个技能做的事情，是把"数据特征 + 分析目的 → 图表类型 → 可访问性 → 性能方案"这条链路标准化，让你在动手写代码之前就已经选对了方向。

"一键安装"的思路与步骤：

确认安装前提：该技能以 SKILL.md 为主体，配合 references/（选型矩阵、图表目录、可访问性、颜色系统、性能指南）、assets/（调色板、示例数据集）、examples/（可运行代码）等目录组织内容，属于"渐进式披露"结构。你需要一个支持 AI 技能（Skill）加载的宿主环境或开发助手平台，具体支持的平台与版本要求以官方说明为准。
执行安装：在技能市场/技能库中检索技能名「数据可视化」或英文名 visualizing-data，也可以通过技能ID 13378 精确定位；具体的安装命令、CLI 入口或点击路径，因宿主平台而异，以官方说明为准。
验证是否生效：安装完成后，用一句贴近真实需求的话测试它是否被正确唤起，例如：“我有过去 12 个月的销售额数据，要放进运营仪表板，应该用什么图？顺便给我一份 React 实现。” 如果技能生效，回答应当体现"数据评估 → 目的判定 → 图表选型 → 可访问性 → 性能"的推理链条，而不是直接甩一段代码。
进一步验证深度能力：可以追问"这个图对色盲用户友好吗"“数据有 8 万条散点怎么办”，看它是否能给出 WCAG 2.1 AA 的具体条款与对应的性能策略。

一键安装的真正价值在于：装一次，之后每次做图表都能复用同一套判断标准，团队里不同人画出来的图不会再风格各异、可读性参差。

2. 该技能的主要功能和特点

系统化选型框架（核心差异化）：把选型拆成三步——先评估数据（分类/连续/时间序列/空间/层次；1D/2D/多变量；<100 / 100–1K / 1K–10K / >10K 点），再确定目的（比较/趋势/分布/关系/构成/流程/层次/地理），最后落到图表类型。这条决策树在详情中以"快速决策树"形式完整给出。
24+ 种可视化类型，按目的组织：比较值用条形图、棒棒糖图；趋势用折线图、面积图、流图、坡度图、Sparklines；分布用直方图、箱形图、小提琴图；关系用散点图、气泡图、Hexbin 图；构成用树状图、堆叠条形图、瀑布图；流程用桑基图、弦图；层次用旭日图、树状图；地理用等值线图、符号地图；多维度还有平行坐标图、雷达图、Small Multiples；时间序列有甘特图、日历热力图、蜡烛图；网络有力导向图、邻接矩阵。
三级分层设计：层级 1 是面向普通受众的基本原语（条形、折线、散点、饼图、面积），层级 2 是目的驱动的分析型图表，层级 3 是面向复杂数据与专业受众的高级图表。这意味着无论受众是老板还是数据工程师，都能找到合适的表达层级。
内置可访问性规范：要求为图表添加 aria-label 文本替代（示例写法为 <figure role="img" aria-label="销售额从第三季度到第四季度增长了15%">）、非文本 UI 元素至少 3:1 对比度、正文至少 4.5:1（大文本 ≥24px 可为 3:1）、不单独依赖颜色而叠加图案与标签，并提供 Tab / Enter / Space / 方向键的键盘导航约定。
色盲安全调色板：直接给出 IBM 推荐色值 #648FFF、#785EF0、#DC267F、#FE6100、#FFB000，并明确提示避免红/绿组合（约 8% 男性存在红绿色盲）。
性能分级策略：按行数给出四档方案（直接 SVG 渲染 → 降采样到约 500 点 → Canvas 渲染 → 服务端聚合），这是普通"图表库文档"很少系统给出的部分。
与设计令牌体系打通：可与 design-tokens 技能配合，用 --chart-color-primary、--chart-color-1 到 --chart-color-10、--chart-axis-color、--chart-grid-color、--chart-tooltip-bg 等变量驱动图表配色，浅色/深色/高对比度主题自动适配。
常见错误清单：图表优先思维、超过 6 类还用饼图、双轴图表、2D 够用却上 3D、彩虹色阶、截断 y 轴、颜色过多（建议限制在 6–8 类）、缺少轴标签与单位——每一条都对应真实的翻车现场。
和普通图表库文档比强在哪：图表库文档回答"这个库怎么用"，这个技能回答"该用什么图、为什么、以及怎么让它对所有人都可读"。它是决策层，不是 API 层。

3. 如何使用该技能？

技能内置了一套六步快速开始工作流，实际使用时按这个顺序推进即可：

步骤 1：评估数据 先向技能描述数据的三个属性。输入示例：

“数据是分类 + 连续型，大约 8 个类别，每类 1 个数值，总量约 50 行。”

步骤 2：确定分析目的 明确你要讲的故事属于哪一类。输入示例：

“目的是比较各渠道的转化表现，受众是市场团队。”

步骤 3：选择图表类型 技能会依据决策树给出结论。例如"比较 5–10 个类别 → 条形图"；“显示 12 个月销售 → 折线图”；“显示年龄分布 → 直方图或小提琴图”；“探索相关性 → 散点图”；“显示预算分解 → 树状图或堆叠条形图”。更复杂的选型可参考 references/selection-matrix.md 中的完整决策树。

步骤 4：实现 按技术栈获取对应实现建议。详情给出的真实示例是基于 Recharts 的 React 折线图：

npm install recharts

import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';

const data = [
  { month: 'Jan', sales: 4000 },
  { month: 'Feb', sales: 3000 },
  { month: 'Mar', sales: 5000 },
];

export function SalesChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="sales" stroke="#8884d8" />
      </LineChart>
    </ResponsiveContainer>
  );
}

其他库的命令同样明确：自定义可视化用 npm install d3；科学/交互式 3D 用 npm install react-plotly.js plotly.js。可运行的完整例子放在 examples/javascript/ 下（bar-chart.tsx、line-chart.tsx、scatter-plot.tsx、accessible-chart.tsx），可用 cd examples/javascript && npm install && npm start 启动查看。

步骤 5：应用可访问性 让技能帮你补全文本替代、对比度检查、色盲安全配色与数据表替代方案。

步骤 6：优化性能 说明数据规模，例如"散点图有 8 万个点"，技能会建议从 SVG 切换到 Canvas 渲染，或改用 Hexbin 图做聚合表达。

输出验证：详情提供了 scripts/validate_accessibility.py <chart-html> 用于校验可访问性，并建议用浏览器开发者工具中的颜色视觉缺陷模拟器测试色盲效果。

推荐提问模板（可直接复制改数）：

“我的数据是【时间序列】，共【12 个月 × 3 个指标】，数据量约【36 点】，目的是【展示趋势】，技术栈是【React + TypeScript】，请给出图表类型选择理由、可访问性检查清单和一段可运行代码。”

4. 同类型竞品对比分析

需要说明的是，这里的"竞品"包含两类：一类是图表库本身（技能内部就会推荐它们），另一类是不借助任何选型框架、直接手工画图的传统做法。二者与"数据可视化Skill"的关系是"决策层 vs 执行层"。

方案名称	定位	核心功能	安装/使用门槛	适用场景	优势与不足
数据可视化Skill（visualizing-data）	图表选型与实现指导的"决策层"	选型决策树、24+ 图表目录、WCAG 2.1 AA 可访问性规范、色盲安全调色板、按数据量的性能策略、多语言实现建议	需在支持 Skill 的宿主环境中安装，具体入口与命令以官方说明为准	从零设计仪表板、不确定该用什么图、需要兼顾无障碍与性能	优势：解决"为什么选这个图"，横跨多种库与语言，含可访问性与性能这种常被忽略的维度。不足：本身不是渲染引擎，最终仍要落到 Recharts、D3 等具体库上执行
Recharts	React 业务仪表板图表库	可组合 React 组件、声明式 API、默认响应式	`npm install recharts`，需具备 React 基础	中后台仪表板、常规业务图表快速落地	优势：上手快、代码量小、与 React 生态贴合。不足：高度定制或非常规图表类型受限，缺少选型与可访问性层面的系统指导
D3.js	自定义数据可视化底层库	最大灵活性、无限图表类型、直接操作 DOM/SVG	`npm install d3`，学习曲线陡峭	定制化极强的可视化、独特交互与动画	优势：几乎什么图都能画，行业标准。不足：开发成本高，可访问性与性能需自行把控，小需求容易过度工程
Plotly（React / Python）	科学计算与交互式图表	3D 可视化、统计图表、开箱即用交互	`npm install react-plotly.js plotly.js`；Python 侧有同 API 的 Plotly	科学数据、需要立体或统计图形的场景	优势：交互功能开箱即用，JS 与 Python API 一致。不足：包体积偏大，视觉风格定制不如 D3 灵活

一个实用的判断是：如果你已经清楚要画什么图、只缺代码，直接查图表库文档即可；如果你还在"该画什么"和"怎么让它对人友好"这两步上犹豫，先用这个技能把方向定下来，再去装库。

5. 该技能的典型应用场景与实际体验情况

场景一：前端工程师搭建运营仪表板 痛点很典型——需求方只说"做得直观一点"，工程师凭直觉选了饼图展示 9 个渠道占比，上线后被吐槽看不清。使用方式是先把数据特征（分类 + 连续、9 个类别）和目的（比较构成）讲清楚，技能会指出"饼图最多 5–6 片"，并建议改用排序条形图或树状图。实际体验：上手几乎零成本，因为它的输入就是你本来就要想清楚的问题；效果最明显的是"阻止你犯错"，而不是"帮你炫技"。注意点是要把数据规模一并说明，否则性能建议无法给出。

场景二：数据产品经理做报表规范评审 痛点是团队里每张图配色、坐标轴、单位各不相同，评审靠"我觉得不好看"。使用方式是让技能输出一份可访问性检查清单（文本替代、3:1/4.5:1 对比度、不单靠颜色区分、键盘可达），并绑定 IBM 色盲安全调色板作为团队标准。实际体验：把主观审美争论转化为可勾选的客观条目，评审效率明显提升。注意点是 WCAG 条款需要结合业务实际裁剪，不必为内部临时图强推全套标准。

场景三：数据分析师选择分布与关系图表 痛点是不知道该用直方图、箱形图还是小提琴图，也不清楚样本量对选择的影响。使用方式是描述"连续单变量、约 2000 个样本、想看分布形态与离群值"，技能会按分布类图表给出对应建议并提示对比实现方式。实际体验：决策树比模糊经验更可靠，尤其适合跨专业背景的分析师；注意它给的是方法论指导，最终图表质量仍取决于数据清洗质量。

场景四：大数据量可视化的性能兜底 痛点是散点图数据涨到 8 万条后页面卡顿。使用方式是明确数据量落在 10K–100K 区间，技能会建议改用 Canvas 渲染或改用 Hexbin 图做聚合，超过 100K 则走后端聚合。实际体验：四档性能建议把"要不要优化"变成了"落在哪一档"的简单判断，减少了猜测；注意阈值是经验值，真实项目仍应结合设备与交互复杂度实测。

整体上手难度评估：低。它不需要你安装额外的运行时依赖，安装完成后用自然语言提问即可；但它的价值上限取决于你提问时提供的上下文是否具体——数据维度、数据量、目标受众、技术栈，四项说得越清楚，输出的可用度越高。

6. 该技能能为用户带来的价值

第一，把"选图"从手感变成流程。 三步评估法（数据类型 → 分析目的 → 图表类型）让选型可以被复述、被评审、被新人复用。团队不再依赖某个"很会画图的人"，而是依赖一套公开的判断标准，这本身就能显著缩短需求沟通与返工的循环。

第二，显著降低可访问性门槛。 WCAG 2.1 AA 的对比度数值、色盲安全色值、键盘导航约定、aria-label 写法都被现成给出，开发者不需要再去逐条查阅规范文档。对于需要面向公众或受合规约束的产品，这部分省下的调研与整改成本往往比写代码本身更高。

第三，提前规避性能返工。 四档数据量策略让"上线后才发现卡"变成"设计阶段就定好渲染方案"。在 1K、10K、100K 这几个关键节点上做出正确选择，可以避免一次彻底的技术方案重构。

第四，压缩重复决策成本。 图表类型的常见错误清单（饼图超过 6 类、双轴图、彩虹色阶、截断 y 轴、颜色超过 8 类、缺单位）本质是一份"团队级检查表"。每次做图少踩一个坑，长期累积下来的返工时间相当可观。

第五，可量化的收益方向。 从指标上看，通常体现在：图表需求从提出到定稿的往返轮次减少、可访问性问题的上线后修复数量下降、大数据量页面的首屏渲染时间缩短、以及团队图表规范的一致性提升。具体数值因团队与项目而异，建议在引入后以自身基线做前后对比。

第六，与既有设计体系正向叠加。 通过设计令牌对接图表配色变量，能让图表的浅色/深色/高对比度主题自动生效，避免"设计系统升级了但图表没跟上"的割裂感。

7. 常见问题 FAQ

Q1：这个技能怎么安装？我不知道入口在哪。 A：在支持 AI 技能（Skill）的宿主环境中，通过技能名称「数据可视化」或英文名 visualizing-data 检索安装，也可以用技能ID 13378 精确定位。不同平台的安装命令、菜单路径和版本要求不一致，具体以官方说明为准。安装后用一句真实需求测试它是否被唤起即可。

Q2：它是免费的还是要收费？ A：技能详情中未包含任何定价信息，是否收费、是否有免费额度取决于你使用的宿主平台与技能分发方，以官方说明为准。需要注意的是，它推荐的图表库（Recharts、D3.js、Plotly 等）都是独立开源项目，各自遵循其自身许可协议。

Q3：它自己会画图吗？还是只给建议？ A：它的主体是"选型框架 + 实现指导 + 可访问性/性能规范"，同时提供了可直接运行的代码示例（如 React + Recharts 的折线图组件、examples/javascript/ 下的柱状图、折线图、散点图和可访问图表示例），并给出 npm install 命令。也就是说它既指导选型，也能给出可落地的实现起点，但最终的渲染能力来自它推荐的那些图表库。

Q4：适合谁用？新手会不会看不懂？ A：最直接受益的是前端工程师、数据产品经理、数据分析师和 BI/报表开发者。新手同样友好——决策树本身就是入门级的判断逻辑（“比较 5–10 个类别就用条形图”），而可访问性和常见错误清单相当于一份避坑指南。反而是有经验的人更容易忽略可访问性和性能这两块，收益可能更大。

Q5：它和直接查 Recharts / D3 文档、或者和 Excel 默认图表有什么区别？ A：图表库文档回答"这个 API 怎么调"，Excel 默认图表解决"快速出一张"，而它回答的是更上游的问题：“这组数据配这个目的，应该用什么图、为什么、怎么保证所有人都看得懂、数据量大了怎么办”。三者不冲突——用这个技能定方向，用图表库做实现，是最省事的组合。

Q6：支持中文和 Python 吗？ A：技能支持的实现语言包括 JavaScript/TypeScript（主要）、Python、Rust、Go。Python 侧列出了 Plotly（交互式，与 JS 同 API）、Matplotlib（出版物级静态图）、Seaborn（统计可视化）、Altair（声明式语法）四条路径，参考文档位于 references/python/。