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

<!DOCTYPE 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,
      });

      const visSyntax = `
vis line
data
  - time 2020
    value 100
  - time 2021
    value 120
  - time 2022
    value 150
title 年度趋势
`;

      gptVis.render(visSyntax);
    </script>
  </body>
</html>

React

import { GPTVis } from '@antv/gpt-vis';
import { useEffect, useRef } from 'react';

function ChartComponent({ visSyntax }) {
  const containerRef = useRef(null);
  const gptVisRef = useRef(null);

  useEffect(() => {
    if (containerRef.current && !gptVisRef.current) {
      gptVisRef.current = new GPTVis({
        container: containerRef.current,
        width: 600,
        height: 400,
      });
    }
  }, []);

  useEffect(() => {
    if (gptVisRef.current && visSyntax) {
      gptVisRef.current.render(visSyntax);
    }
  }, [visSyntax]);

  return <div ref={containerRef}></div>;
}

// 使用示例
const visSyntax = `
vis column
data
  - category A产品
    value 30
  - category B产品
    value 50
title 产品销量
`;

<ChartComponent visSyntax={visSyntax} />;

Vue

<template>
  <div ref="containerRef"></div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { GPTVis } from '@antv/gpt-vis';

const props = defineProps({
  visSyntax: String,
});

const containerRef = ref(null);
let gptVis = null;

onMounted(() => {
  gptVis = new GPTVis({
    container: containerRef.value,
    width: 600,
    height: 400,
  });

  if (props.visSyntax) {
    gptVis.render(props.visSyntax);
  }
});

watch(
  () => props.visSyntax,
  (newSyntax) => {
    if (gptVis && newSyntax) {
      gptVis.render(newSyntax);
    }
  },
);
</script>

<!-- 使用示例 -->
<ChartComponent :vis-syntax="visSyntax" />

流式渲染支持

GPT-Vis 天然支持流式渲染，可以逐步接收 AI 生成的 Syntax：

import { GPTVis, isVisSyntax } from '@antv/gpt-vis';

const gptVis = new GPTVis({
  container: '#container',
  width: 600,
  height: 400,
});

let buffer = '';

// 当 AI 流式输出 token 时
function onToken(token) {
  buffer += token;
  if (isVisSyntax(buffer)) {
    gptVis.render(buffer);
  }
}

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/ 目录中的各图表文档。每个文档包含：

图表属性和基础概念
适用和不适用场景
详细的数据要求和类型定义
多个实际使用示例

chart-visualization

Chart Visualization Skill

Workflow

Supported Chart Types

GPT-Vis Syntax

Syntax 特点

Framework Integration

HTML / Vanilla JavaScript

React

Vue

流式渲染支持

Syntax Examples

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 (总结摘要)

Best Practices

References