chart-visualization

Name: chart-visualization
Author: antvis

433stars35forks

How to install chart-visualization?

antvis/chart-visualization-skills/chart-visualization

$npx -y skills add antvis/chart-visualization-skills --skill chart-visualization

Installs into the current project.

Summary

将数据可视化为图表。当用户需要生成柱状图、折线图、饼图、散点图、雷达图、桑基图、思维导图、流程图等图表时调用此技能，通过 curl 工具调用 AntV API 生成图表图片

Files · 1

View on GitHub

SKILL.md

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

People who liked this also viewed

6 picks

Type

chart-visualization

433stars35forks

View on GitHub

How to install chart-visualization?

antvis/chart-visualization-skills/chart-visualization

$npx -y skills add antvis/chart-visualization-skills --skill chart-visualization

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

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

People who liked this also viewed

6 picks

Type