Chart Visualization Skill
Workflow
This skill helps AI assistants recommend and generate appropriate data visualizations. The workflow consists of three main steps:
-
Intent Recognition & Chart Selection: Analyze the user's intent and data characteristics to select the most suitable chart type
- Time-series data → Line, Area charts
- Categorical comparison → Column, Bar charts
- Proportion analysis → Pie chart
- Distribution analysis → Histogram, Boxplot, Violin charts
- Relationship/Flow → Sankey chart
- Multi-dimensional comparison → Radar chart
- Other specific needs → Funnel, Waterfall, Liquid, WordCloud, Treemap, Venn, etc.
-
Syntax Generation: Generate GPT-Vis syntax based on the selected chart type and provided data
-
Code Generation: Generate renderable code for the target framework (HTML, React, or Vue)
Supported Chart Types
| 名称 | 别名 | 英文名 | 适用场景 | 分析意图 |
|---|---|---|---|---|
| 折线图 | 线图 | Line Chart | 时间序列数据，展示趋势变化 | 趋势分析、对比 |
| 柱形图 | 柱状图 | Column Chart | 分类数据比较 | 对比、分布、排名 |
| 条形图 | 横向柱状图 | Bar Chart | 分类数据比较，标签较长 | 对比、分布、排名 |
| 饼图 | 饼状图 | Pie Chart | 显示部分占整体的比例 | 占比、成分 |
| 面积图 | 区域图 | Area Chart | 时间序列，强调趋势和总量 | 趋势分析、对比 |
| 散点图 | - | Scatter Chart | 显示两个变量的关系 | 相关性分析、分布 |
| 双轴图 | 组合图 | Dual-Axes Chart | 同时展示两个不同量级的数据 | 多维对比、趋势分析 |
| 直方图 | - | Histogram | 显示数据分布 | 分布分析 |
| 箱线图 | 盒须图 | Boxplot | 显示数据分布和异常值 | 分布分析、异常检测 |
| 雷达图 | 蜘蛛图 | Radar Chart | 多维度数据对比 | 多维对比 |
| 漏斗图 | - | Funnel Chart | 展示流程转化率 | 流程分析、转化分析 |
| 瀑布图 | - | Waterfall Chart | 显示累计效应 | 增减变化分析 |
| 水波图 | 进度球 | Liquid Chart | 显示百分比或进度 | 进度展示、占比 |
| 词云图 | 词云 | Word Cloud | 展示文本词频 | 词频分析、热点展示 |
| 小提琴图 | - | Violin Chart | 显示数据分布密度 | 分布分析 |
| 韦恩图 | 文氏图 | Venn Chart | 显示集合关系 | 集合交并关系 |
| 矩阵树图 | 树状图 | Treemap | 显示层级数据占比 | 层级占比、结构分析 |
| 桑基图 | - | Sankey Chart | 展示流量流向 | 流向分析 |
| 表格 | 数据表 | Table | 展示详细数据明细 | 数据展示、查找 |
| 总结摘要 | - | Summary | 文本总结内容 | 内容总结 |
GPT-Vis Syntax
GPT-Vis 使用简洁的类 Markdown 语法来描述图表配置，使 AI 更容易生成。基本结构如下：
vis [chart-type]
data
- [field1] [value1]
[field2] [value2]
[optional-property] [value]
Syntax 特点
- 简洁易读: 类 Markdown 的缩进语法，易于 AI 生成
- 流式友好: 支持逐 token 渲染，适合流式输出
- 容错性强: 能优雅处理不完整数据
- 类型安全: 每个图表有明确的数据结构
Framework Integration
GPT-Vis 支持在 HTML、React 和 Vue 中使用，提供统一的 API 来渲染 Syntax。
HTML / Vanilla JavaScript
html1<!DOCTYPE html> 2<html> 3 <head> 4 <script src="https://unpkg.com/@antv/gpt-vis/dist/umd/index.min.js"></script> 5 </head> 6 <body> 7 <div id="container"></div> 8 <script> 9 const gptVis = new GPTVis.GPTVis({ 10 container: '#container', 11 width: 600, 12 height: 400, 13 }); 14 15 const visSyntax = ` 16vis line 17data 18 - time 2020 19 value 100 20 - time 2021 21 value 120 22 - time 2022 23 value 150 24title 年度趋势 25`; 26 27 gptVis.render(visSyntax); 28 </script> 29 </body> 30</html>
React
jsx1import { GPTVis } from '@antv/gpt-vis'; 2import { useEffect, useRef } from 'react'; 3 4function ChartComponent({ visSyntax }) { 5 const containerRef = useRef(null); 6 const gptVisRef = useRef(null); 7 8 useEffect(() => { 9 if (containerRef.current && !gptVisRef.current) { 10 gptVisRef.current = new GPTVis({ 11 container: containerRef.current, 12 width: 600, 13 height: 400, 14 }); 15 } 16 }, []); 17 18 useEffect(() => { 19 if (gptVisRef.current && visSyntax) { 20 gptVisRef.current.render(visSyntax); 21 } 22 }, [visSyntax]); 23 24 return <div ref={containerRef}></div>; 25} 26 27// 使用示例 28const visSyntax = ` 29vis column 30data 31 - category A产品 32 value 30 33 - category B产品 34 value 50 35title 产品销量 36`; 37 38<ChartComponent visSyntax={visSyntax} />;
Vue
vue1<template> 2 <div ref="containerRef"></div> 3</template> 4 5<script setup> 6import { ref, onMounted, watch } from 'vue'; 7import { GPTVis } from '@antv/gpt-vis'; 8 9const props = defineProps({ 10 visSyntax: String, 11}); 12 13const containerRef = ref(null); 14let gptVis = null; 15 16onMounted(() => { 17 gptVis = new GPTVis({ 18 container: containerRef.value, 19 width: 600, 20 height: 400, 21 }); 22 23 if (props.visSyntax) { 24 gptVis.render(props.visSyntax); 25 } 26}); 27 28watch( 29 () => props.visSyntax, 30 (newSyntax) => { 31 if (gptVis && newSyntax) { 32 gptVis.render(newSyntax); 33 } 34 }, 35); 36</script> 37 38<!-- 使用示例 --> 39<ChartComponent :vis-syntax="visSyntax" />
流式渲染支持
GPT-Vis 天然支持流式渲染，可以逐步接收 AI 生成的 Syntax：
javascript1import { GPTVis, isVisSyntax } from '@antv/gpt-vis'; 2 3const gptVis = new GPTVis({ 4 container: '#container', 5 width: 600, 6 height: 400, 7}); 8 9let buffer = ''; 10 11// 当 AI 流式输出 token 时 12function onToken(token) { 13 buffer += token; 14 if (isVisSyntax(buffer)) { 15 gptVis.render(buffer); 16 } 17}
Syntax Examples
Line Chart (折线图)
适用场景: 时间序列数据，展示趋势变化
Syntax 示例:
vis line
data
- time 2020
value 100
- time 2021
value 120
- time 2022
value 150
title 年度数据趋势
详细用法参考: references/line.md
Column Chart (柱形图)
适用场景: 分类数据比较
Syntax 示例:
vis column
data
- category A产品
value 30
- category B产品
value 50
- category C产品
value 20
title 产品销量对比
详细用法参考: references/column.md
Bar Chart (条形图)
适用场景: 分类数据比较，标签较长
Syntax 示例:
vis bar
data
- category 产品类别A
value 30
- category 产品类别B
value 50
- category 产品类别C
value 20
详细用法参考: references/bar.md
Pie Chart (饼图)
适用场景: 显示部分占整体的比例
Syntax 示例:
vis pie
data
- category 类别A
value 30
- category 类别B
value 50
- category 类别C
value 20
详细用法参考: references/pie.md
Area Chart (面积图)
适用场景: 时间序列，强调趋势和总量
Syntax 示例:
vis area
data
- time 2020
value 100
- time 2021
value 120
- time 2022
value 150
详细用法参考: references/area.md
Scatter Chart (散点图)
适用场景: 显示两个变量的关系
Syntax 示例:
vis scatter
data
- x 1
y 2
- x 2
y 4
- x 3
y 3
详细用法参考: references/scatter.md
Dual-Axes Chart (双轴图)
适用场景: 同时展示两个不同量级的数据
Syntax 示例:
vis dual-axes
data
- category 1月
value 100
count 10
- category 2月
value 120
count 15
- category 3月
value 150
count 12
详细用法参考: references/dual-axes.md
Histogram (直方图)
适用场景: 显示数据分布
Syntax 示例:
vis histogram
data
- value 10
- value 12
- value 15
- value 18
- value 20
详细用法参考: references/histogram.md
Boxplot (箱线图)
适用场景: 显示数据分布和异常值
Syntax 示例:
vis boxplot
data
- category A
value 10
- category A
value 15
- category A
value 20
- category B
value 12
- category B
value 18
详细用法参考: references/boxplot.md
Radar Chart (雷达图)
适用场景: 多维度数据对比
Syntax 示例:
vis radar
data
- dimension 维度1
value 80
- dimension 维度2
value 90
- dimension 维度3
value 70
详细用法参考: references/radar.md
Funnel Chart (漏斗图)
适用场景: 展示流程转化率
Syntax 示例:
vis funnel
data
- stage 访问
value 1000
- stage 注册
value 500
- stage 购买
value 100
详细用法参考: references/funnel.md
Waterfall Chart (瀑布图)
适用场景: 显示累计效应
Syntax 示例:
vis waterfall
data
- category 初始
value 100
- category 增加
value 50
- category 减少
value -30
详细用法参考: references/waterfall.md
Liquid Chart (水波图)
适用场景: 显示百分比或进度
Syntax 示例:
vis liquid
data
- value 0.65
详细用法参考: references/liquid.md
Word Cloud (词云图)
适用场景: 展示文本词频
Syntax 示例:
vis word-cloud
data
- word 数据
value 100
- word 可视化
value 80
- word 图表
value 60
详细用法参考: references/word-cloud.md
Violin Chart (小提琴图)
适用场景: 显示数据分布密度
Syntax 示例:
vis violin
data
- category A
value 10
- category A
value 15
- category A
value 20
详细用法参考: references/violin.md
Venn Chart (韦恩图)
适用场景: 显示集合关系
Syntax 示例:
vis venn
data
- sets A
size 10
- sets B
size 8
- sets A,B
size 3
详细用法参考: references/venn.md
Treemap (矩阵树图)
适用场景: 显示层级数据占比
Syntax 示例:
vis treemap
data
- category 分类A
value 30
- category 分类B
value 50
- category 分类C
value 20
详细用法参考: references/treemap.md
Sankey Chart (桑基图)
适用场景: 展示流量流向
Syntax 示例:
vis sankey
data
- source A
target B
value 10
- source B
target C
value 5
- source A
target C
value 5
详细用法参考: references/sankey.md
Table (表格)
适用场景: 展示详细数据明细
Syntax 示例:
vis table
data
- 姓名 张三
年龄 25
城市 北京
- 姓名 李四
年龄 30
城市 上海
详细用法参考: references/table.md
Summary (总结摘要)
适用场景: 数据报告生成、洞察结论呈现、叙事性数据展示
Syntax 示例:
# Q4 销售分析报告
## 核心指标
[2024 年 Q4](time_desc)，公司[销售额](metric_name)达到[¥523 万](metric_value, origin=5230000)，
较上季度[增长 15.2%](ratio_value, origin=0.152, assessment="positive")。
## 关键发现
- [新客户数](metric_name)：[1,234](metric_value, origin=1234)，环比增长[8.3%](ratio_value, origin=0.083)
- [客户留存率](metric_name)：[89.5%](ratio_value, origin=0.895)
- [平均订单金额](metric_name)：[¥4,567](metric_value, origin=4567)
其中，[线上渠道](dim_value)贡献了[68%](contribute_ratio, origin=0.68)的销售额。
详细用法参考: references/summary.md
Best Practices
-
选择合适的图表类型
- 时间序列优先使用折线图或面积图
- 分类比较优先使用柱形图或条形图
- 占比分析使用饼图（分类不超过 5 个）
- 多维对比使用雷达图
-
数据要求
- 确保数据字段与图表类型匹配
- 数值字段必须是数字类型
- 分类字段必须是文本类型
-
避免误用
- 不要用饼图展示趋势
- 不要用折线图展示无序分类
- 不要在数据量过大时使用饼图
References
详细的图表知识、使用方法、数据要求和更多示例，请参考 references/ 目录中的各图表文档。每个文档包含：
- 图表属性和基础概念
- 适用和不适用场景
- 详细的数据要求和类型定义
- 多个实际使用示例
