mcpField
V
visualization

visualization

github.com/aws-samples数据与数据库19758 次安装3 周前更新
代码仓库

关于 visualization

用于根据数值数据生成前端交互图表规范的 Skill，适合应用内可视化；输出图表规范，而非可下载的图片文件。

主要功能

  1. 01生成柱形、折线和饼图规范
  2. 02使用结构化图表数据字段
  3. 03支持标题和坐标轴标签
  4. 04支持为数据点指定颜色

适用场景

  1. 01绘制季度销售数据
  2. 02展示调查回答占比
  3. 03呈现股票价格走势
  4. 04比较市场份额

安装

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

$npx skills add https://github.com/aws-samples/sample-strands-agent-with-agentcore --skill visualization

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

详细介绍

可视化

何时使用此技能

使用 create_visualization 创建应用内可交互的数据图表。 如果需要交付 PNG 或 PDF 文件，请改用视觉设计技能。此工具返回图表规范，而非可下载的图像文件。如果所需图表需要此架构不支持的控件（例如固定坐标轴范围），请选择支持这些控件的工具，而不要省略此要求。

适用于此技能……适用于 excalidraw 技能……
按季度划分的销售数据系统架构图
调查回复百分比流程图或决策树
随时间变化的股价序列图／交互图
市场份额细分思维导图或概念图
任何 x/y 或细分项/数值数据形状、方框、箭头、标签

可用工具

  • create_visualization：创建供前端渲染的图表规范。

参数（必须完全匹配）

参数类型必需描述
chart_typestr是"bar"、"line" 或 "pie"
datalist[dict]是数据对象数组——请参阅下方格式
titlestr否图表标题
x_labelstr否X 轴标签（仅适用于 bar/line）
y_labelstr否Y 轴标签（仅适用于 bar/line）

数据格式（重要——使用准确的字段名称）

柱状图／折线图——每个对象必须包含 "x" 和 "y" 键：

[{"x": "Jan", "y": 100}, {"x": "Feb", "y": 150}, {"x": "Mar", "y": 120}]

饼图——每个对象必须包含 "segment" 和 "value" 键：

[{"segment": "Category A", "value": 30}, {"segment": "Category B", "value": 70}]

可选：为任意数据点添加 "color": "hsl(210, 100%, 50%)" 以自定义颜色。

工具输入示例

柱状图：

{
  "chart_type": "bar",
  "data": [{"x": "Q1", "y": 250}, {"x": "Q2", "y": 310}, {"x": "Q3", "y": 280}],
  "title": "Quarterly Revenue",
  "x_label": "Quarter",
  "y_label": "Revenue ($K)"
}

饼图：

{
  "chart_type": "pie",
  "data": [{"segment": "Mobile", "value": 60}, {"segment": "Desktop", "value": 35}, {"segment": "Tablet", "value": 5}],
  "title": "Traffic by Device"
}

应避免的常见错误

  • 不要使用 {"labels": [...], "values": [...]} 格式——data 必须是字典列表。
  • 柱状图／折线图数据必须使用 "x" 和 "y" 键，不能使用 "label" 或 "name"。

UI 指南（来自 tools-config）

数据格式：

  • 柱状图／折线图：[{"x": 标签, "y": 数值}]
  • 饼图：[{"segment": 名称, "value": 数值}]
  • 可选颜色："color": "hsl(210, 100%, 50%)"

评论

支持 Markdown