AgentSkillsCN

visualization

从数据中创建交互式图表可视化(柱状图、折线图、饼图)。

SKILL.md
--- frontmatter
name: visualization
description: Create interactive chart visualizations (bar, line, pie) from data.

Visualization

Available Tool

  • create_visualization: Create a chart specification for frontend rendering.

Parameters (MUST match exactly)

ParameterTypeRequiredDescription
chart_typestrYes"bar", "line", or "pie"
datalist[dict]YesArray of data objects — see formats below
titlestrNoChart title
x_labelstrNoX-axis label (bar/line only)
y_labelstrNoY-axis label (bar/line only)

Data Formats (CRITICAL — use exact field names)

Bar / Line charts — each object MUST have "x" and "y" keys:

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

Pie charts — each object MUST have "segment" and "value" keys:

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

Optional: add "color": "hsl(210, 100%, 50%)" to any data point for custom color.

Example tool_input

Bar chart:

json
{
  "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)"
}

Pie chart:

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

Common Mistakes to Avoid

  • Do NOT use {"labels": [...], "values": [...]} format — data MUST be a list of dicts.
  • Bar/line data MUST use "x" and "y" keys, NOT "label" or "name".