# 圖表視覺化代理技能

> 使用 AntV 圖表視覺化技能將複雜的資料集轉換為直覺的視覺化圖表，提供 26 種以上的圖表類型和 AI 驅動的生成功能。輕鬆建立具影響力的資料故事。

- Canonical: https://nanoskill.ai/tw/skills/chart-visualization-skills
- Markdown: https://nanoskill.ai/tw/skills/chart-visualization-skills.md
- Author: antvis
- Published: 2026-06-09T05:00:00.000Z
- Updated: 2026-07-25T04:33:38.870Z
- Language: zh-TW
- 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 圖表視覺化技能提供一套專業的視覺化解決方案，旨在高效且準確地將複雜的資料集轉換為直覺的視覺化圖表。由螞蟻集團發起，這套技能讓使用者能夠掌控從圖表設計、互動式探索到深入資料分析的整個工作流程，並透過智慧設計規範和豐富的元件庫大幅降低創作門檻。它為日常報表、動態儀表板和複雜的互動式分析提供強大的支援，讓資料可視且易於理解。

該套件包含專門的技能，例如用於生成 26+ 種圖表類型的「chart-visualization」、用於將文字轉換為引人入勝的視覺化資訊圖表的「infographic-creator」（附有 50+ 個範本），以及使用 T8 語法將非結構化資料轉換為語義豐富報表的「narrative-text-visualization」。透過 AI 整合進一步增強這些功能，簡化並自動化視覺化圖表的生成與最佳化，讓分析師能更專注於發掘洞察並推動業務決策。

開發人員還可以利用專用技能，如用於多維度交叉分析表格的「antv-s2-expert」、用於生成 G6 v5 圖形視覺化的「antv-g6-graph」，以及用於建立 G2 v5 統計圖表的「antv-g2-chart」。這些工具提供遵循最佳實踐的精確、可執行的程式碼，涵蓋核心功能、各種佈局演算法、元件類型和互動。這些技能可透過 CLI 或 API 整合到 Node.js 專案中，為不同的開發需求提供彈性。

## Key features

- **全面的圖表生成**: 存取 26 種以上的智慧型圖表類型，滿足多樣化的資料視覺化需求，包括時間序列、比較、關係和地理資料。
- **AI 驅動的資訊圖表建立**: 使用 50 種以上的範本，從文字內容生成美觀的資訊圖表，以直覺的符號將資訊轉化為可感知的視覺語言。
- **結構化的敘述文字視覺化**: 使用 T8 語法（一種類似 Markdown 的語言）將非結構化資料轉換為語義豐富的敘述性報表，用於建立帶有實體標註和迷你圖表的資料敘述。
- **多維度交叉分析表格**: 利用 AntV S2 Expert 開發樞紐分析表、工作表以及自訂儲存格，為多維度資料分析提供全面的指導。
- **進階圖形與統計圖表生成**: 生成準確的 G6 圖形程式碼，用於網路圖、樹狀圖和流程圖，以及用於長條圖、折線圖和圓餅圖等統計視覺化的 G2 圖表程式碼，並遵循最佳實踐。

## Use cases

- **建立日常報表和動態儀表板**: 快速將複雜的資料集轉換為直覺的視覺化圖表，用於日常報表和動態儀表板，實現高效的資料驅動決策。
- **開發複雜的互動式分析工具**: 利用 AntV 強大的工具包來建立先進的互動式分析應用程式，提供深入的資料探索和視覺化功能。
- **生成 AI 最佳化的視覺化圖表**: 透過整合的 AI 功能，簡化並自動化資料視覺化圖表的生成與最佳化，讓分析師能專注於洞察。
- **將資料轉化為引人入勝的資訊圖表**: 使用多種範本將資料、資訊和知識轉換為視覺上吸引人的資訊圖表，以清晰且令人難忘的方式傳達複雜的概念。

## Result preview

探索由此技能提供的專業 AI 驅動資料視覺化報表。

![A chart visualizing 'Salary Distribution by Department' using box plots for Engineering, Design, Marketing, Sales, and Support. Each box plot shows median, interquartile ranges, whiskers, and outliers, with distinct color coding for each department. The chart clearly conveys salary spread and variability across departments.](https://file.nanoskill.ai/chart-outcome-1.png)

![A line chart titled 'Cumulative Growth Trajectory' showing growth over quarters from Q1 23 to Q4 24. Data points are labeled with numerical values and connected by a green line, with a shaded area beneath to highlight cumulative increase. The chart demonstrates steady upward growth from 1,200 to 6,100.](https://file.nanoskill.ai/chart-outcome-2.png)

![A composite image containing two data visualizations. The upper chart is a scatter plot titled 'Investment vs Performance' comparing investment amounts to performance scores for three groups, represented by color-coded circular markers of varying sizes. The lower chart is a bubble chart titled 'GDP vs Life Expectancy' showing GDP per capita versus life expectancy for countries including Japan, Sweden, USA, Germany, China, Brazil, India, and Kenya. Each country is represented by a colored bubble sized by an additional variable, highlighting global economic and health disparities.](https://file.nanoskill.ai/chart-outcome-3.png)

## Result walkthrough

### 安裝

將 AntV 圖表視覺化技能新增至您的 AI 代理。

![A screenshot of an AI assistant terminal showing the installation of the AntV chart-visualization-skills package. The assistant logs the execution of the command to add the skills repository via 'npx skills add', confirms interactive selection with the '--yes' flag, and lists all 9 installed skills including chart generation, graph visualization, multi-dimensional tables, editing engines, infographics, narrative visualizations, and skill maintenance. The log notes symlinking into Hermes Agent and a security assessment showing low/medium risk with nothing critical.](https://file.nanoskill.ai/chart-visualization-install.png)

### 描述

描述您想視覺化的主題領域，包括目標、目標受眾和偏好的圖表類型或樣式。

![A screenshot of an AI assistant task panel for creating a comprehensive AntV chart visualization package. The instructions specify generating multiple chart types, infographics from textual data with templates, and narrative-style reports. Emphasis is on a clean, modern, professional style, ensuring readability, hierarchy, interactivity, dynamic dashboards, drill-down exploration, cross-analysis, and production-ready code snippets for Node.js integration. The final output should be a structured PDF or interactive dashboard, balancing aesthetic elegance with functional clarity.](https://file.nanoskill.ai/chart-visualization-task.png)

### 最佳化視覺化

此技能生成針對清晰度、佈局和洞察進行最佳化的圖表和儀表板。

![A screenshot showing the AI assistant output after loading AntV visualization skills and preparing a professional PowerPoint deck. The assistant indicates understanding of all AntV visualization tools and plans to build a data visualization showcase featuring real data across multiple chart types, infographics, narrative visualizations, network graphs, and S2 tables, ready for presentation in PPT format.](https://file.nanoskill.ai/chart-visualization-outcome.png)

## Skill definition

# 圖表視覺化技能

將資料轉化為視覺語言，以實現更好的思考。

## 概觀

在資料驅動決策的時代，高效且準確的資料視覺化和分析至關重要。AntV 提供一套專業的視覺化解決方案，為從圖表設計、互動式探索到深入資料分析的整個工作流程，提供強大的工具包和全面的技能組合。它讓使用者能夠迅速將複雜的資料集轉換為直覺的視覺化圖表，並透過智慧設計規範和豐富的元件庫大幅降低創作門檻。無論是日常報表、動態儀表板，還是複雜的互動式分析，AntV 都能提供可靠的支援。透過整合 AI 功能，這些工具進一步簡化並自動化視覺化圖表的生成與最佳化，讓分析師能更專注於發掘洞察並推動業務決策，真正實現資料的可視化與可理解性。

> [!WARNING]
> 本專案僅合併 AI 生成的程式碼。
>
> **如何貢獻：**
> 1. 提交一個清楚描述問題的議題
> 2. 並根據您的需求將其指派給 @copilot

## 使用方法

將此市集新增至 Claude Code：
```bash
/plugin marketplace add antvis/chart-visualization-skills
```

或者，您可以直接為多個代理安裝技能：

```bash
npx skills add antvis/chart-visualization-skills
```

## 可用技能

- 📊 **chart-visualization**：由 AntV 提供支援的綜合圖表生成技能，提供 26 種以上的圖表類型，用於智慧型資料視覺化。

`Chart Visualization` 從 26 種以上的可用選項中智慧型選擇最合適的圖表類型，根據詳細規格擷取參數，並生成高品質的圖表圖片。它涵蓋時間序列、比較、部分與整體、關係、地理、階層、統計和專業視覺化。

- 🎨 **infographic-creator**：根據提供的文字內容建立美觀的資訊圖表。當使用者要求建立資訊圖表時使用。

`Infographic Creator` 使用 AntV Infographic 將資料、資訊和知識轉化為可感知的視覺語言。它將視覺設計與資料視覺化相結合，提供 50 種以上的範本，包括清單、序列、階層、比較、關係和圖表。它使用直覺的符號壓縮複雜的資訊，幫助受眾快速理解並記住關鍵要點。

- 🖼️ **icon-retrieval**：從圖示庫中搜尋並擷取圖示 SVG 字串。預設返回最多 5 個匹配的圖示（可自訂）。

`Icon Search` 幫助使用者針對各種使用案例（包括資訊圖表、網頁開發、設計等）找到合適的圖示。透過關鍵字搜尋以發現可用的圖示並直接擷取其 SVG 字串。預設情況下，每次搜尋返回最多 5 個匹配的圖示（可透過 topK 參數自訂），並附有其網址和完整的 SVG 內容。

- 📝 **narrative-text-visualization**：使用 T8 語法從資料生成結構化的敘述性文字視覺化。

`Narrative Text Visualization` (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` 生成遵循 Spec Mode 最佳實踐的準確、可執行的 G2 v5 程式碼。它涵蓋 30 種以上的圖表類型（區間圖、折線圖、區域圖、點圖、矩形圖、儲存格圖、矩形式樹狀結構圖、桑基圖、和弦圖、文字雲、儀表圖等）、資料轉換（stackY、dodgeX、binX、fold 等）、座標系統（直角座標、極座標、theta、徑向）、比例尺、互動（刷選、滑桿、圖例篩選）、元件（軸、圖例、工具提示、註解）以及多視圖組合。內建的防護機制可防止常見的 v4→v5 遷移陷阱，例如使用已棄用的鏈式 API、無效的調色盤名稱，或在使用者程式碼中引用 `d3`。

**評估結果**

Harness Engineering 方法已針對 174 個圖表生成測試案例進行嚴格測試，證明相對於基準方法有顯著改善：

| **模型** | **G2** | **G6** |
| :---: | :---: | :---: |
| qwen3-coder-480b-a35b-instruct | ✨ 98.2% <sup><sub>+17.7%</sub></sup> | 94.8% <sup><sub>+15.6%</sub></sup> |
| Kimi-K2.5 | 97.7% <sup><sub>+17.2%</sub></sup> | 96.9% <sup><sub>+17.7%</sub></sup> |
| GLM-5.1 | 93.6% <sup><sub>+13.1%</sub></sup> | 92.8% <sup><sub>+13.6%</sub></sup> |
| DeepSeek-V3.2 | 90.8% <sup><sub>+10.3%</sub></sup> | ✨ 97.9% <sup><sub>+18.7%</sub></sup> |
| Context7 <sub>基準</sub> | 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
```

**命令的使用方式**：

```
用法：antv [選項] [命令]

用於 AntV 圖表視覺化技能擷取的 CLI 工具

選項：
  -V, --version               輸出版本號碼
  -h, --help                 顯示命令的說明

命令：
  retrieve [選項] <查詢>      搜尋符合查詢的的技能
  get [選項] <id>             透過精確的 ID 獲取技能
  list [選項]                 列出所有可用的技能
  info [選項]                 顯示來自 SKILL.md 的技能資訊
  help [命令]                 顯示命令的說明

擷取選項：
  --library <lib>             按函式庫篩選（例如 g2、g6）
  --topk <n>                  要返回的結果數量（預設：7）
  --content                   在結果中包含 markdown 內容主體；核心約束（SKILL.md 第 1-2 節）始終會作為第一個結果前置附加
  --output <格式>             輸出格式：json | text（預設："text"）
```

> 注意：`--content` 始終會將函式庫的核心約束（SKILL.md 的第 1 節和第 2 節，直到 `<!-- CONSTRAINTS:END -->` 標記）作為第一個結果前置附加，確保模型收到必要的規則以及參考文件。

### 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` | all | 函式庫篩選（`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 中到 `<!-- CONSTRAINTS:END -->` 的內容 — 會作為第一個元素注入（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 主體中到 <!-- CONSTRAINTS:END --> 標記的內容；當 includeInfo 為 true 時由 retrieve 注入
}
```

| 參數 | 類型 | 預設值 | 說明 |
| :--- | :--- | :--- | :--- |
| `library` | `string` | `'g2'` | 要取得資訊的函式庫（`g2` 或 `g6`） |

## 授權條款

MIT 授權條款 — 詳情請參閱 [LICENSE](LICENSE) 檔案。

## FAQ

### 什麼是 AntV 圖表視覺化技能？

AntV 圖表視覺化技能是由 AntV 提供的一套工具和功能，旨在幫助使用者高效且準確地將資料視覺化並進行分析。它們包含圖表生成、資訊圖表建立、敘述文字視覺化，以及專業的圖形和統計圖表開發等功能。

### chart-visualization 技能支援多少種圖表類型？

chart-visualization 技能提供 26 種以上的圖表類型，用於智慧型資料視覺化，涵蓋廣泛的資料表現形式，包括時間序列、比較、關係和地理資料。

### 我可以使用這些技能建立資訊圖表嗎？

可以，infographic-creator 技能可讓您根據提供的文字內容建立美觀的資訊圖表。它使用 AntV Infographic，並提供 50 種以上的範本，將資料轉化為可感知的視覺語言。

### 什麼是敘述文字視覺化（T8 語法）？

敘述文字視覺化（T8）使用 T8 語法（一種宣告式、類似 Markdown 的語言）將非結構化資料轉換為語義豐富的敘述性報表。它專為建立帶有實體標註、迷你圖表和專業格式的資料敘述而設計，適用於分析報表和洞察文件。

### AntV 圖表視覺化技能如何協助進行多維度分析？

antv-s2-expert 技能作為 S2 多維度交叉分析表格引擎的開發助手。它為樞紐分析表、工作表、自訂儲存格以及 @antv/s2 的各種其他功能提供全面的指導。

### 是否有用於生成特定圖形和統計圖表的工具？

是的，antv-g6-graph 技能可生成用於圖形視覺化（如網路圖、樹狀圖和流程圖）的 G6 v5 程式碼。antv-g2-chart 技能則生成用於統計圖表（如長條圖、折線圖、圓餅圖和散佈圖）的 G2 v5 程式碼，並遵循最佳實踐。