前言¶

做数据展示类应用时，常见流程是先打开 ECharts 或 Chart.js 的文档，找一张看起来最合适的图，再照着示例改数据字段。图选得对不对、配色和坐标轴是否合理，往往要渲染出来看效果才知道。数据图表可视化设计｜简诗 AI（@user_fccf428b/chart-designer）把这一步前置：由 Skill 根据数据特征给出图表类型建议，再产出可直接使用的图表配置和仪表盘布局。

下面介绍这个 Skill 的基本情况、能力和用法。

这是什么¶

这是一个基于通用 SKILL.md 格式的社区 Skill，用于数据可视化环节。

• 名称：数据图表可视化设计｜简诗 AI
• 坐标：@user_fccf428b/chart-designer
• 发布者：user_fccf428b
• 版本：1.0.1
• 来源：community
• 分类：data-analysis
• 官方地址：https://api.skillhub.cn/user_fccf428b/chart-designer

它要解决的问题是：拿到一份数据后，快速确定合适的图表类型、拿到对应的 ECharts / Chart.js 配置，并按可视化最佳实践组织仪表盘布局，减少反复查文档和试错的时间。

核心功能¶

根据官方简介，这个 Skill 提供三件事。

1、推荐图表类型。根据数据的维度、指标和关系，给出最适合的图表类型建议，而不是固定套用某一种图。
2、生成图表配置。产出 ECharts 或 Chart.js 的配置对象，可直接用于前端渲染。
3、设计仪表盘布局并应用可视化最佳实践。把多个图表组织成合理的页面结构，并在配色、坐标轴、图例等方面套用通用的可视化规范。

安装与启用¶

官方资料里没有给出具体的安装命令或目录路径，页面也无法抓取确认，因此这里不臆造命令。按通用做法，在支持 SKILL.md 格式的 Agent 环境里，把该 Skill 添加到 Agent 的 skills 目录（或通过对应的 Skill 管理入口启用），再按下面的典型用法调用即可。

需要留意的一点是：该 Skill 的标签为 requires_api_key=false，说明不依赖外部 API Key，启用前不需要额外申请密钥。

典型用法¶

官方简介只描述了能力范围，未提供逐条可复现的示例，因此这里给出的是按能力范围组织的实际用法。

1、描述数据，让 Skill 推荐图表类型。

向 Agent 说明数据的字段、维度和想表达的关系，例如「这是一份按月份统计的订单量和转化率，想看趋势」，请它给出图表类型建议，并说明选择理由（趋势看折线，占比看饼图，对比看柱状等）。

2、指定库，拿到配置对象。

说明前端用的图表库，比如「用 ECharts」，让 Agent 生成对应的配置，包含数据映射、系列、坐标轴和图例设置。拿到配置后可直接贴进项目里渲染验证。

3、让 Skill 组织仪表盘布局。

如果有多张图要放在同一页面，把各图的数据和用途告诉 Agent，请它给出布局建议，包括图表的排列顺序、尺寸比例和整体配色方案。

适用场景与注意¶

适合的场景：数据看板、报表页面、内部工具的统计展示，尤其是需要同时输出多张图表的情况。对不熟悉 ECharts / Chart.js 配置细节的开发者，可以减少查文档和调样式的开销。

需要注意的限制：

• 图表类型建议和布局建议属于通用最佳实践的范畴，遇到领域性强的指标口径，仍需要自己确认业务含义。
• 配置对象需要与你项目里实际使用的图表库版本对应，版本差异可能导致部分配置项不生效。
• 生成的配置建议渲染验证后再上线，不要直接当作最终交付。

结尾¶

这个 Skill 的价值在于把图表选型和配置生成压缩到一次对话里完成，省掉反复试错。如果你正在做数据展示类功能，可以把它当作前端开发前的一环来用。

官方地址：https://api.skillhub.cn/user_fccf428b/chart-designer

（注：本文依据官方简介及抓取到的元数据编写，页面无法抓取，安装命令等细节以官方地址页面为准。）