Chart Visualization

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-vis37 38请求体为 JSON，必须包含 `type` 和 `source: "chart-visualization-skills"` 字段。39 40示例：41```bash42curl -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```json49{"success":true,"resultObj":"https://..."}50```51 52将 `resultObj` 中的 URL 以 Markdown 图片格式输出：`![图表](URL)`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: boolean83- **bar**: `{category: string, value: number, group?: string}[]`，可选 group / stack (默认 stack: true)84- **column**: `{category: string, value: number, group?: string}[]`，可选 group (默认 true) / stack85- **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: number92- **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}[]`，可选 nodeAlign96- **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（透视表字段）