请根据用户输入的内容,将数据可视化为图表。
步骤
- 分析用户数据和需求,选择最合适的图表类型
- 构造符合规范的 JSON 请求体
- 使用 curl 工具调用 API 生成图表图片
- 将返回的图片 URL 以 Markdown 图片格式输出
图表选择指南
根据用户的数据特征和需求,选择最合适的图表类型:
- 时间序列:用
line(趋势)或 area(累计趋势);两个不同量纲用 dual-axes
- 比较类:用
bar(横向分类对比)或 column(纵向分类对比);频率分布用 histogram
- 占比类:用
pie(比例构成)或 treemap(层级占比)
- 关系与流程:用
scatter(相关性)、sankey(流向)或 venn(集合重叠)
- 层级与树形:用
organization-chart 或 mind-map
- 专用类型:
radar:多维度对比
funnel:流程阶段转化
liquid:百分比/进度
word-cloud:文本词频
boxplot / violin:统计分布
network-graph:复杂节点关系
fishbone-diagram:因果分析
flow-diagram:流程图
spreadsheet:结构化数据表或透视表
API 接口
POST https://antv-studio.alipay.com/api/gpt-vis
请求体为 JSON,必须包含 type 和 source: "chart-visualization-skills" 字段。
示例:
curl -X POST https://antv-studio.alipay.com/api/gpt-vis \
-H "Content-Type: application/json" \
-d '{"type":"line","source":"chart-visualization-skills","data":[{"time":"2025-01","value":100}],"title":"示例图表"}'
返回示例:
{"success":true,"resultObj":"https://..."}
将 resultObj 中的 URL 以 Markdown 图片格式输出:
支持的图表类型
| 分类 |
图表类型 |
| 比较类 |
条形图(bar)、柱状图(column)、瀑布图(waterfall)、双轴图(dual-axes) |
| 趋势类 |
面积图(area)、折线图(line)、散点图(scatter) |
| 分布类 |
箱线图(boxplot)、直方图(histogram)、小提琴图(violin)、漏斗图(funnel) |
| 占比类 |
饼图(pie)、水波图(liquid)、词云(word-cloud) |
| 层级类 |
组织架构图(organization-chart)、思维导图(mind-map)、矩形树图(treemap)、桑基图(sankey) |
| 关系类 |
关系图(network-graph)、韦恩图(venn) |
| 流程类 |
流程图(flow-diagram)、鱼骨图(fishbone-diagram) |
| 多维类 |
雷达图(radar) |
| 表格类 |
表格/透视表(spreadsheet) |
通用可选参数
| 参数 |
类型 |
默认值 |
说明 |
| theme |
string |
"default" |
主题:"default" / "academy" / "dark" |
| width |
number |
600 |
图表宽度 |
| height |
number |
400 |
图表高度 |
| title |
string |
"" |
图表标题 |
| style.texture |
string |
"default" |
纹理:"default" / "rough"(手绘风格) |
带坐标轴的图表还支持:axisXTitle、axisYTitle。
各图表 data 格式
- area / line:
{time: string, value: number, group?: string}[],可选 stack: boolean
- bar:
{category: string, value: number, group?: string}[],可选 group / stack (默认 stack: true)
- column:
{category: string, value: number, group?: string}[],可选 group (默认 true) / stack
- scatter:
{x: number, y: number, group?: string}[]
- pie:
{category: string, value: number}[],可选 innerRadius: number (0-1)
- radar:
{name: string, value: number, group?: string}[]
- funnel:
{category: string, value: number}[]
- waterfall:
{category: string, value?: number, isTotal?: boolean, isIntermediateTotal?: boolean}[]
- dual-axes: categories: string[], series: {type: "column"|"line", data: number[], axisYTitle?: string}[]
- histogram:
number[],可选 binNumber: number
- boxplot / violin:
{category: string, value: number, group?: string}[]
- liquid: percent: number (0-1),可选 shape: "circle"|"rect"|"pin"|"triangle"
- word-cloud:
{text: string, value: number}[]
- sankey:
{source: string, target: string, value: number}[],可选 nodeAlign
- treemap:
{name: string, value: number, children?: ...}[] (最深 3 层)
- venn:
{sets: string[], value: number, label?: string}[]
- network-graph / flow-diagram:
{nodes: {name: string}[], edges: {source: string, target: string, name?: string}[]}
- fishbone-diagram / mind-map:
{name: string, children?: ...} (最深 3 层)
- organization-chart:
{name: string, description?: string, children?: ...} (最深 3 层),可选 orient: "horizontal"|"vertical"
- spreadsheet:
Record<string, string | number>[],可选 rows / columns / values(透视表字段)
1---2name: chart-visualization3description: 将数据可视化为图表。当用户需要生成柱状图、折线图、饼图、散点图、雷达图、桑基图、思维导图、流程图等图表时调用此技能,通过 curl 工具调用 AntV API 生成图表图片4---5
6请根据用户输入的内容,将数据可视化为图表。
7
8## 步骤
91. 分析用户数据和需求,选择最合适的图表类型
102. 构造符合规范的 JSON 请求体
113. 使用 curl 工具调用 API 生成图表图片
124. 将返回的图片 URL 以 Markdown 图片格式输出
13
14## 图表选择指南
15
16根据用户的数据特征和需求,选择最合适的图表类型:
17
18- **时间序列**:用 `line`(趋势)或 `area`(累计趋势);两个不同量纲用 `dual-axes`
19- **比较类**:用 `bar`(横向分类对比)或 `column`(纵向分类对比);频率分布用 `histogram`
20- **占比类**:用 `pie`(比例构成)或 `treemap`(层级占比)
21- **关系与流程**:用 `scatter`(相关性)、`sankey`(流向)或 `venn`(集合重叠)
22- **层级与树形**:用 `organization-chart` 或 `mind-map`
23- **专用类型**:
24 - `radar`:多维度对比
25 - `funnel`:流程阶段转化
26 - `liquid`:百分比/进度
27 - `word-cloud`:文本词频
28 - `boxplot` / `violin`:统计分布
29 - `network-graph`:复杂节点关系
30 - `fishbone-diagram`:因果分析
31 - `flow-diagram`:流程图
32 - `spreadsheet`:结构化数据表或透视表
33
34## API 接口
35
36POST https://antv-studio.alipay.com/api/gpt-vis
37
38请求体为 JSON,必须包含 `type` 和 `source: "chart-visualization-skills"` 字段。
39
40示例:
41```bash
42curl -X POST https://antv-studio.alipay.com/api/gpt-vis \
43 -H "Content-Type: application/json" \
44 -d '{"type":"line","source":"chart-visualization-skills","data":[{"time":"2025-01","value":100}],"title":"示例图表"}'
45```
46
47返回示例:
48```json
49{"success":true,"resultObj":"https://..."}
50```
51
52将 `resultObj` 中的 URL 以 Markdown 图片格式输出:``
53
54## 支持的图表类型
55
56| 分类 | 图表类型 |
57|------|---------|
58| 比较类 | 条形图(bar)、柱状图(column)、瀑布图(waterfall)、双轴图(dual-axes) |
59| 趋势类 | 面积图(area)、折线图(line)、散点图(scatter) |
60| 分布类 | 箱线图(boxplot)、直方图(histogram)、小提琴图(violin)、漏斗图(funnel) |
61| 占比类 | 饼图(pie)、水波图(liquid)、词云(word-cloud) |
62| 层级类 | 组织架构图(organization-chart)、思维导图(mind-map)、矩形树图(treemap)、桑基图(sankey) |
63| 关系类 | 关系图(network-graph)、韦恩图(venn) |
64| 流程类 | 流程图(flow-diagram)、鱼骨图(fishbone-diagram) |
65| 多维类 | 雷达图(radar) |
66| 表格类 | 表格/透视表(spreadsheet) |
67
68## 通用可选参数
69
70| 参数 | 类型 | 默认值 | 说明 |
71|------|------|--------|------|
72| theme | string | "default" | 主题:"default" / "academy" / "dark" |
73| width | number | 600 | 图表宽度 |
74| height | number | 400 | 图表高度 |
75| title | string | "" | 图表标题 |
76| style.texture | string | "default" | 纹理:"default" / "rough"(手绘风格) |
77
78带坐标轴的图表还支持:axisXTitle、axisYTitle。
79
80## 各图表 data 格式
81
82- **area / line**: `{time: string, value: number, group?: string}[]`,可选 stack: boolean
83- **bar**: `{category: string, value: number, group?: string}[]`,可选 group / stack (默认 stack: true)
84- **column**: `{category: string, value: number, group?: string}[]`,可选 group (默认 true) / stack
85- **scatter**: `{x: number, y: number, group?: string}[]`
86- **pie**: `{category: string, value: number}[]`,可选 innerRadius: number (0-1)
87- **radar**: `{name: string, value: number, group?: string}[]`
88- **funnel**: `{category: string, value: number}[]`
89- **waterfall**: `{category: string, value?: number, isTotal?: boolean, isIntermediateTotal?: boolean}[]`
90- **dual-axes**: categories: string[], series: {type: "column"|"line", data: number[], axisYTitle?: string}[]
91- **histogram**: `number[]`,可选 binNumber: number
92- **boxplot / violin**: `{category: string, value: number, group?: string}[]`
93- **liquid**: percent: number (0-1),可选 shape: "circle"|"rect"|"pin"|"triangle"
94- **word-cloud**: `{text: string, value: number}[]`
95- **sankey**: `{source: string, target: string, value: number}[]`,可选 nodeAlign
96- **treemap**: `{name: string, value: number, children?: ...}[]` (最深 3 层)
97- **venn**: `{sets: string[], value: number, label?: string}[]`
98- **network-graph / flow-diagram**: `{nodes: {name: string}[], edges: {source: string, target: string, name?: string}[]}`
99- **fishbone-diagram / mind-map**: `{name: string, children?: ...}` (最深 3 层)
100- **organization-chart**: `{name: string, description?: string, children?: ...}` (最深 3 层),可选 orient: "horizontal"|"vertical"
101- **spreadsheet**: `Record<string, string | number>[]`,可选 rows / columns / values(透视表字段)