mcpField
D
data-visualizer

data-visualizer

github.com/oakoss数据与数据库20123 次安装11 周前更新
代码仓库

关于 data-visualizer

Data Visualizer 是帮助开发者制作图表、仪表板和交互式可视化的技能。它涵盖 Recharts、Chart.js 和 D3.js 的库与图表选择，并提供响应式和无障碍设计模式。

主要功能

  1. 01Recharts、Chart.js 和 D3.js 指引
  2. 02图表类型选择建议
  3. 03仪表板与下钻模式
  4. 04响应式设计实践
  5. 05无障碍与性能建议

适用场景

  1. 01为数据集选择图表类型
  2. 02规划交互式 KPI 仪表板
  3. 03调整可视化以适配手机屏幕

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oakoss/agent-skills --skill data-visualizer

安装后在 Claude Code 中输入/data-visualizer确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
chart-types.md
dashboard-patterns.md
data-formatting-and-export.md
design-and-accessibility.md
library-selection.md
performance.md
storytelling-and-annotation.md

详细介绍

数据可视化

使用现代库构建图表、仪表板和交互式数据可视化。涵盖 Recharts（React）、Chart.js（与框架无关）和 D3.js（自定义／高级）。

库的选择

库最适合的场景React自定义程度包大小（gzip）
Recharts快速构建 React 图表、标准类型原生有限~139KB
Chart.js与框架无关、API 简单封装器中等~68KB（支持 tree-shaking）
D3.js自定义可视化、完全掌控手动完全每个模块 ~13-30KB

图表类型选择

图表最适合的场景避免使用的场景
折线图随时间变化的趋势、连续数据分类数据
条形图比较类别、排名连续数据
饼图／圆环图部分与整体的关系（最多 5-7 个扇区）超过 7 个类别、精确比较
面积图随时间变化的数量、堆叠类别重叠序列过多
散点图相关性、异常值、分布时间序列
热力图两个维度上的强度简单比较

仪表板模式

模式用例主要特性
KPI 仪表板高管指标趋势指标、卡片网格
实时实时监控SSE/WebSocket、禁用动画
交互式筛选器探索性分析时间段／区域选择、下钻
下钻层级数据点击缩放（年 → 月 → 日）

响应式设计

方法实现
基于容器的尺寸设置<ResponsiveContainer width="100%" height={300}>
宽高比模式<ResponsiveContainer width="100%" aspect={2}>
适配移动设备在小屏幕上减小 strokeWidth、height
简化标签在移动设备上减少坐标轴标签

常见错误

错误修正
固定宽度／高度使用 ResponsiveContainer
实时数据使用动画设置 isAnimationActive={false}
饼图扇区过多最多 5-7 个扇区，其余合并为“其他”
颜色不符合无障碍要求使用符合 WCAG AA 标准且适合色盲用户的调色板
加载整个图表库使用动态导入延迟加载
不格式化数据使用 Intl.NumberFormat 格式化货币／百分比

委派

  • 选择图表类型前，先探索数据形状和可用字段：使用 Explore Agent
  • 根据需求构建完整的多图表仪表板：使用 Task Agent
  • 为大规模分析页面规划可视化架构：使用 Plan Agent

参考资料

  • 库选择 — Recharts、Chart.js、D3.js 的配置与示例
  • 图表类型 — 折线图、柱状图、饼图、面积图、散点图、热力图及其使用场景
  • 仪表板模式 — KPI、实时 SSE、交互式筛选器、下钻
  • 设计与无障碍 — 配色方案、色盲友好配色、响应式设计、动画
  • 数据格式化与导出 — 数字格式化器、CSV 导出、PNG 导出
  • 性能 — 延迟加载、大型数据集的虚拟化
  • 叙事与注释 — 数据叙事、注释、配色策略、边缘状态

评论

支持 Markdown