| name | chart-visualization |
| description | 推荐并生成合适的数据可视化图表，使用 GPT-Vis 库。支持两种输出模式：（1）语法模式——生成 Syntax 或 JSON 配置；（2）代码模式——生成完整的运行代码。支持 26 种图表类型。 Use when this capability is needed. |
| metadata | {"author":"antvis"} |
图表可视化技能
步骤
- 意图识别：根据用户意图和数据特征选择图表类型
- 确定输出模式：根据上下文选择语法模式或代码模式
- 生成输出：按所选模式生成内容
支持的图表类型
| type 值 | 适用场景 |
|---|
| line | 时间序列趋势 |
| area | 时间序列趋势+总量 |
| column | 分类数据对比 |
| bar | 分类对比（标签长） |
| pie | 部分占整体比例 |
| scatter | 两变量关系 |
| dual-axes | 不同量级数据对比 |
| histogram | 连续数值频次分布 |
| boxplot | 数据分布与异常值 |
| violin | 数据分布密度 |
| radar | 多维度对比 |
| funnel | 流程转化率 |
| waterfall | 累计增减变化 |
| liquid | 百分比/进度 |
| word-cloud | 词频展示 |
| venn | 集合交并关系 |
| treemap | 层级数据占比 |
| sankey | 流量流向 |
| flow-diagram | 流程步骤 |
| mindmap | 层级知识梳理 |
| indented-tree | 树节点层级/目录 |
| network-graph | 实体间关联关系 |
| organization-chart | 组织层级 |
| fishbone-diagram | 根因分析 |
| table | 表格数据展示 |
| summary | 内容总结 |
输出模式
模式一：语法模式（Syntax / JSON）
用于 LLM 应用集成场景，生成图表配置供 GPTVis.render() 消费。支持两种格式：
- Syntax 格式：类 Markdown 缩进语法，适合流式输出（LLM 逐 token 生成时可实时渲染）
- JSON 格式：标准 JSON 对象，适合结构化 API 调用
两种格式等价，GPTVis.render() 均可直接接受。
模式二：代码模式
用于用户需要可直接运行的完整代码场景。生成包含安装说明和完整代码的输出。
GPTVis API
GPTVis 是库的统一入口类，负责创建、渲染和销毁图表。
构造函数
new GPTVis(options: VisualizationOptions)
VisualizationOptions：
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|---|
container | string | HTMLElement | 是 | — | CSS 选择器或 DOM 元素 |
width | number | 否 | — | 图表宽度（px） |
height | number | 否 | — | 图表高度（px） |
theme | 'default' | 'light' | 'dark' | 'academy' | 否 | 'light' | 主题 |
wrapper | boolean | 否 | false | 是否显示外层 UI 容器（含标签页、下载、复制等） |
locale | string | 否 | 'zh-CN' | wrapper 内文案语言 |
方法
render(config: string | object): void
渲染图表。接受两种输入：
- Syntax 字符串：以
vis [type] 开头的文本，自动解析为配置对象
- JSON 配置对象：包含
type 字段的对象
- 纯文本：不以
vis 开头的字符串会被当作 summary 类型渲染
多次调用 render() 会自动销毁前一个图表再渲染新图表。
destroy(): void
销毁当前图表实例，释放资源。
语法模式：JSON 格式
直接输出符合图表 TypeScript 类型的 JSON 对象，GPTVis.render() 可直接消费。
JSON 示例
{
"type": "column",
"data": [
{ "category": "A产品", "value": 30, "group": "线上" },
{ "category": "B产品", "value": 50, "group": "线上" }
],
"title": "产品销量对比",
"axisXTitle": "产品",
"axisYTitle": "销量（万）",
"stack": true,
"theme": "academy",
"style":
语法模式：Syntax 格式
类 Markdown 缩进语法，支持流式渲染。第一行必须是 vis [type]。
语法规则
基本属性 — key value，每行一个：
title 年度趋势
theme dark
对象数组 — data 下每项用 - 开头，子字段缩进：
{ data: { time: string; value: number; }[]; }
对应：
data
- time 2020
value 100
- time 2021
value 120
纯值数组 — 每项用 - 开头：
{ data: number[] }
对应：
data
- 10
- 20
含空格的字符串值 — 用引号（单引号或双引号）包裹；不含空格时可省略引号：
categories
- "North America"
- '东南 亚'
- 欧洲
嵌套对象 — 对象名占一行，子属性缩进：
{ style?: { backgroundColor?: string; palette?: string[] } }
对应：
style
backgroundColor #f0f2f5
palette
- #5B8FF9
- #61DDAA
递归树形 — children 数组用 - 缩进：
type TreeData = { name: string; children?: TreeData[] };
{ data: TreeData; }
对应：
data
name 根节点
children
- name 子节点A
children
- name 孙节点
- name 子节点B
Syntax 完整示例
vis column
data
- category A产品
value 30
group 线上
- category B产品
value 50
group 线上
title 产品销量对比
axisXTitle 产品
axisYTitle 销量（万）
stack true
theme academy
style
palette
- #5B8FF9
- #61DDAA
Markdown 语法
当输出为 Markdown 格式时，使用 GPT-Vis 作为 fenced code block 的语言标记，内容区写入完整的 Syntax 格式：
```GPT-Vis
vis line
data
- time 2020
value 100
```
格式：
```GPT-Vis
<完整的 Syntax 内容，首行 vis <chart-type>>
```
语法规则：
- 语言标记固定为
GPT-Vis
- 内容区使用 Syntax 格式规则编写，首行必须包含
vis <chart-type>（完整列表见上方支持的图表类型）
- 代码块会被 Markdown 插件转换为
，由浏览器端渲染
注意：Markdown 模式下，内容区必须写首行 vis <type>，与纯 Syntax 模式格式一致。
代码模式
根据目标框架生成完整可运行代码。
安装方式
NPM：
npm install @antv/gpt-vis
import { GPTVis } from '@antv/gpt-vis';
CDN：
<script src="https://unpkg.com/@antv/gpt-vis/dist/umd/index.min.js"></script>
CDN 引入后通过 GPTVis.GPTVis 访问主类。
HTML 完整示例
<html>
<head>
<script src="https://unpkg.com/@antv/gpt-vis/dist/umd/index.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
const gptVis = new GPTVis.GPTVis({
container: '#container',
width: 600,
height: 400,
});
gptVis.render();
