Build Web Data Visualization 插件

Build Web Data Visualization 插件专注于 Web 端数据可视化，帮助选择最佳图表类型、创建仪表盘、设计地图和软件架构图等。

功能概述

• 📊 图表类型选择建议
• 🎨 视觉评价与改进
• 📈 仪表盘创建
• 🗺️ 地图和地理空间视图
• 📅 甘特时间线
• 🏗️ UML/软件架构图
• 📜 滚动叙事可视化
• 📋 报告和导出
• ♿ 无障碍访问
• 🧪 浏览器实现测试
• 🎨 概念优先的视觉设计

包含的技能

技能列表

技能名称	描述
data-visualization	路由 Web 数据可视化工作，覆盖图表选择、仪表盘、地图、甘特图等

---

数据可视化 (data-visualization)

路由 Web 数据可视化工作，根据需求选择合适的可视化方式。

触发时机

• 需要图表选择建议
• 视觉评价和改进
• 创建仪表盘
• 地图或地理空间视图
• 甘特时间线
• UML/软件架构图
• 滚动叙事可视化
• 报告或导出
• 无障碍访问需求
• 浏览器实现
• 概念优先的视觉设计

支持的可视化类型

类型	描述	适用场景
柱状图/条形图	比较不同类别的数值	销售对比、分类排名
折线图	显示数据随时间的变化趋势	时间序列分析
饼图/环形图	显示部分与整体的关系	占比分析
散点图	显示两个变量之间的相关性	相关性分析
热力图	用颜色编码显示矩阵数据	密度分布
地图	地理空间数据可视化	区域分布、路线规划
甘特图	项目时间线可视化	项目管理
UML 图	软件架构和关系可视化	系统设计
仪表盘	多图表组合的数据面板	数据监控

工作流程

1. 需求分析：理解数据和展示目标
2. 图表选择：推荐最适合的图表类型
3. 概念设计：生成视觉概念
4. 实现：在浏览器中实现可视化
5. 测试：验证交互和响应式布局
6. 无障碍检查：确保可访问性

示例提示词

帮我选择一个合适的图表来展示过去 12 个月的销售趋势

创建一个仪表盘来监控服务器运行状态

用地图展示我们用户在全球的分布

为这个软件系统设计 UML 类图

创建一个甘特图来展示项目里程碑

设计一个滚动叙事的数据故事页面

导出这个图表为 PNG 和 PDF 格式

检查这个图表的无障碍访问合规性