# 图表可视化智能体技能
> 使用 AntV 图表可视化技能将复杂数据集转化为直观的可视化图表，提供 26+ 种图表类型和 AI 驱动的生成。轻松开始创建有影响力的数据故事。
- Canonical: https://nanoskill.ai/zh/skills/chart-visualization-skills
- Markdown: https://nanoskill.ai/zh/skills/chart-visualization-skills.md
- Author: antvis
- Published: 2026-06-09T05:00:00.000Z
- Updated: 2026-07-25T04:33:38.870Z
- Language: zh-CN
- Source type: github
- Popularity signal: 523
## Sources
- https://github.com/antvis/chart-visualization-skills
## Install
```shell
npx skills add https://github.com/antvis/chart-visualization-skills
```
## About
AntV 图表可视化技能提供了一套专业的可视化解决方案，旨在高效、准确地将复杂数据集转化为直观的可视化图表。由蚂蚁集团发起，这套技能使用户能够驾驭从图表设计、交互探索到深入数据分析的整个工作流程，通过智能设计规范和丰富的组件库显著降低了创作门槛。它为日常报告、动态仪表板和复杂的交互式分析提供了强有力的支持，使数据变得可见且易于理解。
该套件包含专门技能，如"chart-visualization"用于生成 26+ 种图表类型，"infographic-creator"用于将文本转化为引人入胜的可视化信息图（提供 50+ 种模板），以及"narrative-text-visualization"用于使用 T8 语法将非结构化数据转换为语义丰富的报告。这些功能通过 AI 集成进一步增强，简化和自动化了可视化的生成与优化，使分析师能够更专注于发现洞察并推动业务决策。
开发人员还可以利用专用技能，如"antv-s2-expert"用于多维交叉分析表，"antv-g6-graph"用于生成 G6 v5 图可视化，以及"antv-g2-chart"用于创建 G2 v5 统计图表。这些工具提供遵循最佳实践的准确、可运行代码，涵盖核心功能、各种布局算法、组件类型和交互。这些技能可以通过 CLI 或 API 集成到 Node.js 项目中，为不同的开发需求提供灵活性。
## Key features
- **全面的图表生成**: 访问 26 种以上的智能图表类型，满足各种数据可视化需求，包括时间序列、比较、关系和地理数据。
- **AI 驱动的信息图创建**: 使用 50 多种模板从文本内容生成精美的信息图，通过直观的符号将信息转化为可感知的视觉语言。
- **结构化叙事文本可视化**: 使用 T8 语法（一种类似 Markdown 的语言）将非结构化数据转换为语义丰富的叙事报告，用于带有实体注释和迷你图表的数据叙事。
- **多维交叉分析表**: 利用 AntV S2 Expert 开发数据透视表、表格工作表和自定义单元格，为多维数据分析提供全面指导。
- **高级图形和统计图表生成**: 生成准确的 G6 图形代码用于网络图、树图和流程图，以及遵循最佳实践的 G2 图表代码用于统计可视化，如条形图、折线图和饼图。
## Use cases
- **创建每日报告和动态仪表板**: 快速将复杂数据集转化为直观的视觉图表，用于每日报告和动态仪表板，实现高效的数据驱动决策。
- **开发复杂的交互式分析工具**: 利用 AntV 强大的工具包构建高级交互式分析应用程序，提供深入的数据探索和可视化功能。
- **生成 AI 优化的可视化**: 通过集成 AI 功能，简化和自动化数据可视化的生成和优化，使分析师能够专注于洞察。
- **将数据转化为引人入胜的信息图**: 使用各种模板将数据、信息和知识转化为视觉上吸引人的信息图，清晰且令人难忘地传达复杂的思想。
## Result preview
探索由该技能提供支持的专业 AI 驱动的数据可视化报告。
## Result walkthrough
### 安装
将 AntV 图表可视化技能添加到您的 AI 智能体中。
### 描述
描述您想要可视化的主题领域，包括目标、目标受众以及偏好的图表类型或样式。
### 优化可视化
该技能生成针对清晰度、布局和洞察进行优化的图表和仪表板。
## Skill definition
# 图表可视化技能
将数据转化为视觉语言，让思考更清晰。
## 概述
在数据驱动决策的时代，高效而准确的数据可视化与分析至关重要。AntV 提供专业级的可视化解决方案，为从图表设计、交互探索到深度数据分析的整个流程，提供了一套强大的工具集和全面的技能。它让用户能够快速将复杂的数据集转化为直观的视觉图表，通过智能设计规范和丰富的组件库显著降低了创作门槛。无论是日常报表、动态仪表板，还是复杂的交互分析，AntV 都能提供可靠支持。通过集成 AI 能力，这些工具进一步简化和自动化了可视化的生成与优化过程。这让分析人员可以更专注于发现洞察和推动业务决策，真正让数据可见、可理解。
> [!WARNING]
> 此项目仅合并 AI 生成的代码。
>
> **如何贡献：**
> 1. 提交 issue 清晰描述问题
> 2. 将问题分配给 @copilot 并附上你的需求
## 使用方法
将此市场添加到 Claude Code：
```bash
/plugin marketplace add antvis/chart-visualization-skills
```
或者你可以直接为你的多代理安装技能：
```bash
npx skills add antvis/chart-visualization-skills
```
## 可用技能
- 📊 **图表可视化**：一项由 AntV 驱动的综合图表生成技能，提供 26 种以上的图表类型，用于智能数据可视化。
`图表可视化` 从 26 种以上可用选项中智能选择最合适的图表类型，根据详细规范提取参数，并生成高质量图表图像。它涵盖时间序列、比较、部分与整体、关系、地理、层次、统计和专业可视化。
- 🎨 **信息图创建器**：根据给定的文本内容创建漂亮的信息图。当用户要求创建信息图时使用。
`信息图创建器` 使用 AntV Infographic 将数据、信息和知识转化为可感知的视觉语言。它将视觉设计与数据可视化相结合，提供 50 多种模板，包括列表、序列、层次、比较、关系和图表。它用直观的符号压缩复杂信息，帮助受众快速理解和记住关键点。
- 🖼️ **图标检索**：从图标库中搜索并获取图标 SVG 字符串。默认返回最多 5 个匹配图标（可自定义）。
`图标搜索` 帮助用户为信息图、Web 开发、设计等各种用例找到合适的图标。通过关键词搜索发现可用图标并直接获取其 SVG 字符串。每次搜索默认返回最多 5 个匹配图标（可通过 topK 参数自定义），并附有其 URL 和完整 SVG 内容。
- 📝 **叙事文本可视化**：使用 T8 语法从数据生成结构化的叙事文本可视化。
`叙事文本可视化` (T8) 使用 T8 语法——一种声明式、类似 Markdown 的语言，用于创建带有实体注释的数据叙事——将非结构化数据转化为语义丰富的叙事报告。它对 LLM 友好且与框架无关，可与 HTML、React 和 Vue 无缝协作。非常适合创建数据分析报告、摘要和洞察文档，其中指标、值、趋势和维度等实体都被正确标记。功能包括内置迷你图表、标准化样式和专业格式。支持真实数据源，并提供轻量级、技术无关的渲染。
- 📋 **antv-s2-expert**：S2 多维交叉分析表开发助手。当用户需要帮助进行 S2 透视表、表格或任何 @antv/s2 相关开发时使用。
`AntV S2 Expert` 帮助用户使用 S2 多维交叉分析表引擎进行开发。它提供关于 `@antv/s2` 核心引擎、`@antv/s2-react` 和 `@antv/s2-vue` 框架绑定、`@antv/s2-react-components` 高级分析组件以及 `@antv/s2-ssr` 服务端渲染的全面指导。涵盖透视表、表格、自定义单元格、主题、事件、交互、排序、总计、工具提示、冻结行列、图标、分页等。
- 🕸️ **antv-g6-graph**：G6 v5 图可视化代码生成器。当用户需要生成 G6 图——包括网络图、树图、流程图、思维导图以及任何使用 G6 库的关系或图结构数据可视化时使用。
`AntV G6 Graph` 生成遵循最佳实践的准确、可运行的 G6 v5 代码。它涵盖核心图初始化、数据结构（节点、边、组合）、10 多种布局算法（力导向、dagre、圆形、网格、思维导图、鱼骨等）、所有内置节点/边/组合类型、状态管理、15 多种行为（拖动画布、缩放画布、点击选择、套索等）、10 多种插件（小地图、工具提示、工具栏、图例、时间轴等）、自定义元素开发、变换和动画。内置的防护措施可以防止常见的 v4→v5 迁移陷阱，例如使用已弃用的 `G6.Graph()` 构造函数、`graph.data()` API 或基于模式的行为配置。
- 📈 **antv-g2-chart**：G2 v5 图表代码生成器。当用户需要生成 G2 图表——条形图、折线图、饼图、散点图、面积图、热力图以及任何使用 G2 库的统计数据可视化时使用。
`AntV G2 Chart` 生成遵循规范模式最佳实践的准确、可运行的 G2 v5 代码。它涵盖 30 多种图表类型（区间、线、面积、点、矩形、单元格、树图、桑基图、弦图、词云、仪表盘等）、数据变换（堆叠 Y、分组 X、分箱 X、折叠等）、坐标系（笛卡尔、极坐标、theta、径向）、比例尺、交互（刷选、滑块、图例过滤）、组件（坐标轴、图例、工具提示、注释）以及多视图组合。内置的防护措施可以防止常见的 v4→v5 迁移陷阱，例如使用已弃用的链式 API、无效的调色板名称或在用户代码中引用 `d3`。
**评估结果**
Harness Engineering 方案经过 174 个图表生成测试用例的严格测试，与基线方法相比有显著改进：
| **模型** | **G2** | **G6** |
| :---: | :---: | :---: |
| qwen3-coder-480b-a35b-instruct | ✨ 98.2% +17.7% | 94.8% +15.6% |
| Kimi-K2.5 | 97.7% +17.2% | 96.9% +17.7% |
| GLM-5.1 | 93.6% +13.1% | 92.8% +13.6% |
| DeepSeek-V3.2 | 90.8% +10.3% | ✨ 97.9% +18.7% |
| Context7 Baseline | 80.5% | 79.2% |
结果显示，Harness Engineering 使 LLM 能够达到接近生产就绪的准确率（最高 98.2%），显著优于 Context7 基线方法。
> [!TIP]
> 更多技能即将推出。
## 库的使用方式
它可以在你的 Node.js 项目中作为库使用，提供 `CLI` 和 `API` 两种方式。
### CLI 使用方式
我们还提供了一个名为 `antv` 的 CLI 工具，便于在终端中使用，全局安装：
```bash
npm install -g @antv/chart-visualization-skills
```
**按查询检索或列出技能**：
```bash
# 通过查询检索技能（仅元数据）
antv retrieve "bar chart" --library g2 --topk 10
# 检索技能并包含完整的 markdown 内容（核心约束自动前置）
antv retrieve "bar chart" --library g2 --content
# 检索技能并以 JSON 格式输出
antv retrieve "bar chart" --library g2 --output json
# 通过精确 ID 获取技能
antv get g2-mark-interval-basic --library g2
# 列出所有可用技能
antv list --library g2 --category core
# 列出技能并以 JSON 格式输出
antv list --output json
# 显示技能信息（来自 SKILL.md 的核心约束）
antv info --library g2
# 以 JSON 格式显示技能信息
antv info --library g2 --output json
```
**命令用法**：
```
Usage: antv [options] [command]
用于 AntV 图表可视化技能检索的 CLI 工具
Options:
-V, --version 输出版本号
-h, --help 显示命令帮助信息
Commands:
retrieve [options] 搜索匹配查询的技能
get [options] 通过精确 ID 获取技能
list [options] 列出所有可用技能
info [options] 显示来自 SKILL.md 的技能信息
help [command] 显示命令帮助信息
Options for retrieve:
--library 按库过滤（例如 g2, g6）
--topk 返回结果的数量（默认：7）
--content 在结果中包含 markdown 内容主体；核心约束（SKILL.md 第 1-2 节）始终作为第一个结果前置
--output 输出格式：json | text（默认："text"）
```
> 注意：`--content` 始终将库的核心约束（SKILL.md 的第 1 节和第 2 节，直到 `` 标记）作为第一个结果前置，确保模型在参考文档旁边获得基本规则。
### API 使用方式
```typescript
import { retrieve } from '@antv/chart-visualization-skills';
// 仅元数据（无内容）
const skills = retrieve('bar chart', { library: 'g2', topK: 5 });
// 包含完整 markdown 内容（核心约束作为第一个结果自动前置）
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true });
// 包含内容但不包含核心约束
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true, includeInfo: false });
```
```typescript
retrieve(query: string, options?: RetrieveOptions): Skill[]
interface RetrieveOptions {
library?: string; // 库过滤器，例如 'g2' 或 'g6'
topK?: number; // 结果数量（默认：7）
content?: boolean; // 包含 markdown 内容主体（默认：false）
includeInfo?: boolean; // 前置 SKILL.md 核心约束（默认：与 content 相同）
}
```
| 选项 | 类型 | 默认值 | 描述 |
| :--- | :--- | :--- | :--- |
| `library` | `string` | 全部 | 库过滤器（`g2` 或 `g6`） |
| `topK` | `number` | `7` | 结果数量 |
| `content` | `boolean` | `false` | 包含 markdown 内容主体 |
| `includeInfo` | `boolean` | 与 `content` 相同 | 将 SKILL.md 核心约束（第 1-2 节）作为第一个结果前置 |
> 备注：
> - 默认检索返回不包含 `content` 字段的轻量级结果对象。
> - `content: true` 返回 markdown 内容主体（不包含 frontmatter 元数据）。
> - 当 `includeInfo` 为 true 时（即 `content: true` 时的默认行为），核心约束块——SKILL.md 中直到 `` 的部分——会被注入为第一个元素（ID 前缀为 `__info__`），确保模型始终看到基本规则。
```typescript
import { info } from '@antv/chart-visualization-skills';
const skillInfo = info('g2');
// => { name: 'antv-g2-chart', description: '...', content: '...', constraintsContent: '...' }
```
```typescript
info(library?: string): SkillInfo | undefined
interface SkillInfo {
name: string;
description: string;
content: string; // 完整的 SKILL.md 主体（frontmatter 之后）
constraintsContent: string; // SKILL.md 主体中直到 标记的部分；当 includeInfo 为 true 时由 retrieve 注入
}
```
| 参数 | 类型 | 默认值 | 描述 |
| :--- | :--- | :--- | :--- |
| `library` | `string` | `'g2'` | 要获取信息的库（`g2` 或 `g6`） |
## 许可证
MIT 许可证——详情请参见 [LICENSE](LICENSE) 文件。
## FAQ
### 什么是 AntV 图表可视化技能？
AntV 图表可视化技能是由 AntV 提供的一套工具和能力，旨在帮助用户高效、准确地可视化和分析数据。它们包括图表生成、信息图创建、叙事文本可视化以及专业图表和统计图表开发等功能。
### 图表可视化技能支持多少种图表类型？
图表可视化技能提供 26 种以上的图表类型，用于智能数据可视化，涵盖时间序列、比较、关系和地理数据等多种数据表示形式。
### 我可以使用这些技能创建信息图吗？
可以，信息图创建技能允许您根据给定的文本内容创建精美的信息图。它使用 AntV Infographic，并提供 50 多种模板，将数据转化为可感知的视觉语言。
### 什么是叙事文本可视化（T8 语法）？
叙事文本可视化（T8）使用 T8 语法（一种声明式 Markdown 风格的语言），将非结构化数据转化为语义丰富的叙事报告。它专为创建带有实体注释、迷你图表和专业格式的数据叙事而设计，适用于分析报告和洞察文档。
### AntV 图表可视化技能如何帮助进行多维分析？
antv-s2-expert 技能充当 S2 多维交叉分析表引擎的开发助手。它为使用数据透视表、表格工作表、自定义单元格以及 @antv/s2 的各种其他功能提供全面的指导。
### 是否有用于生成特定图形和统计图表的工具？
有的，antv-g6-graph 技能为网络图、树图和流程图等图形可视化生成 G6 v5 代码。antv-g2-chart 技能遵循最佳实践，为条形图、折线图、饼图和散点图等统计图表生成 G2 v5 代码。