메뉴
推荐并生成合适的数据可视化图表，使用 GPT-Vis 库。支持两种输出模式：（1）语法模式——生成 Syntax 或 JSON 配置；（2）代码模式——生成完整的运行代码。支持 26 种图表类型。
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/antvis/GPT-Vis --skill chart-visualization명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SKILL.md 표시 중
SOC 직업 분류 기준
| name | chart-visualization |
| description | 推荐并生成合适的数据可视化图表，使用 GPT-Vis 库。支持两种输出模式：（1）语法模式——生成 Syntax 或 JSON 配置；（2）代码模式——生成完整的运行代码。支持 26 种图表类型。 |
| 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 | 内容总结 |
用于 LLM 应用集成场景，生成图表配置供 GPTVis.render() 消费。支持两种格式：
两种格式等价，GPTVis.render() 均可直接接受。
用于用户需要可直接运行的完整代码场景。生成包含安装说明和完整代码的输出。
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渲染图表。接受两种输入：
vis [type] 开头的文本，自动解析为配置对象type 字段的对象vis 开头的字符串会被当作 summary 类型渲染多次调用 render() 会自动销毁前一个图表再渲染新图表。
destroy(): void销毁当前图表实例，释放资源。
直接输出符合图表 TypeScript 类型的 JSON 对象，GPTVis.render() 可直接消费。
{
"type": "column",
"data": [
{ "category": "A产品", "value": 30, "group": "线上" },
{ "category": "B产品", "value": 50, "group": "线上" }
],
"title": "产品销量对比",
"axisXTitle": "产品",
"axisYTitle": "销量（万）",
"stack": true,
"theme": "academy",
"style":
类 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
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 格式时，使用 GPT-Vis 作为 fenced code block 的语言标记，内容区写入完整的 Syntax 格式：
```GPT-Vis
vis line
data
- time 2020
value 100
```
格式：
```GPT-Vis
<完整的 Syntax 内容，首行 vis <chart-type>>
```
语法规则：
GPT-Visvis <chart-type>（完整列表见上方支持的图表类型），由浏览器端渲染
注意：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();
所有图表均包含以下字段，后续各图表类型定义中省略这些字段。各小节标题即为 type 值（如 line、column），对应上方图表类型表中的 type 列。
{ type: string; title?: string; theme?: 'default' | 'light' | 'dark' | 'academy'; style?: { backgroundColor?: string; palette?: string[] } }
{ data: { time: string | number; value: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string; stack?: boolean; style?: { lineWidth?: number } }
stack 仅 area 支持。
{ data: { category: string; value: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string; stack?: boolean; group?: boolean }
value 不可使用百分比数字。
{ data: { category: string; value: number }[]; innerRadius?: number }
innerRadius 设为 0.6 变为环图。
{ data: { x: number; y: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string }
{ categories: string[]; series: { type: 'line' | 'column'; data: number[]; axisYTitle?: string }[]; axisXTitle?: string; style?: { startAtZero?: boolean } }
{ data: number[]; binNumber?: number; axisXTitle?: string; axisYTitle?: string }
同一 category 需多条数据以展示分布。
{ data: { category: string; value: number; group?: string }[]; axisXTitle?: string; axisYTitle?: string; style?: { startAtZero?: boolean } }
{ data: { name: string; value: number; group?: string }[]; align?: boolean }
align: 是否对齐各维度比例尺，默认 false（各轴独立缩放）；true 时所有轴共享同一最大值，适合多系列绝对数值对比。
{ data: { category: string; value: number; }[]; }
value 可为负数表示减少。palette 为色板数组，顺序为 [正值色, 负值色, 汇总色]。
{ data: { category: string; value: number }[]; axisXTitle?: string; axisYTitle?: string; style?: { palette?: string[] } }
percent 范围 0~1。
{ percent: number; shape?: 'rect' | 'circle' | 'pin' | 'triangle' }
{ data: { text: string; value: number; }[]; }
交集用逗号分隔集合标识：sets: "A,B"。label 用于显示图表上对应集合的名称
{ data: { sets: string | string[]; value: number; label?: string }[] }
type TreeNode = { name: string; value: number; children?: TreeNode[] };
{ data: TreeNode[] }
{ data: { source: string; target: string; value: number }[]; nodeAlign?: 'left' | 'center' | 'right' | 'justify' }
source/target 引用节点的 name。
type GraphData = { nodes: { name: string }[]; edges: { source: string; target: string; name?: string }[] };
// flow-diagram
{ data: GraphData }
// network-graph
{ data: GraphData; layout?: 'force' | 'circular' | 'grid' | 'radial' | 'concentric' | 'dagre' }
type TreeData = { name: string; children?: TreeData[] };
// mindmap
{ data: TreeData; direction?: 'H' | 'LR' | 'RL' }
// indented-tree
{ data: TreeData; direction?: 'LR' | 'RL' | 'H' }
// organization-chart
type OrganizationChartData = {
name: string;
description?: string;
children?: OrganizationChartData[];
};
{ data: OrganizationChartData }
mindmap 默认 'H'，indented-tree 默认 'LR'。
type FishboneNode = { name: string; children?: FishboneNode[] };
{ data: FishboneNode; style?: { texture?: 'rough' | 'default' } }
texture: 'rough' 为手绘风格。
{ data: Record<string, string | number>[]; }
summary 与其他图表类型完全不同：不使用 Syntax/JSON 配置，而是使用 T8 语法（Markdown + 语义标注）。
⚠️ 生成 summary 前必须：先读取 references/summary.md 获取 T8 语法规则、完整实体类型列表、属性字段定义、生成要求和示例，然后再生成内容。跳过此步骤将导致语法错误。
time/category，另一个写 group