圖表視覺化代理技能

圖表視覺化技能

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

概觀

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

[!WARNING] 本專案僅合併 AI 生成的程式碼。

如何貢獻：

1. 提交一個清楚描述問題的議題
2. 並根據您的需求將其指派給 @copilot

使用方法

將此市集新增至 Claude Code：

/plugin marketplace add antvis/chart-visualization-skills

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

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 個圖表生成測試案例進行嚴格測試，證明相對於基準方法有顯著改善：

結果顯示，Harness Engineering 使大型語言模型 (LLM) 能夠達到接近生產水準的準確度（最高 98.2%），顯著優於 Context7 基準方法。

[!TIP] 更多技能即將推出。

函式庫使用方式

它可以作為函式庫使用在您的 Node.js 專案中，支援 CLI 和 API。

CLI 使用方式

我們也提供一個名為 antv 的 CLI 工具，方便您在終端機中使用，請全域安裝：

npm install -g @antv/chart-visualization-skills

透過查詢擷取或列出技能：

# 透過查詢擷取技能（僅限元資料）
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 使用方式

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 });

retrieve(query: string, options?: RetrieveOptions): Skill[]

interface RetrieveOptions {
  library?: string;   // 函式庫篩選，例如 'g2' 或 'g6'
  topK?: number;      // 結果數量（預設：7）
  content?: boolean;  // 包含 markdown 內容主體（預設：false）
  includeInfo?: boolean; // 前置附加 SKILL.md 核心約束（預設：與 content 相同）
}

注意事項：

• 預設的擷取會返回輕量級的結果物件，不包含 content 欄位。
• content: true 會返回 markdown 內容主體（排除 frontmatter 元資料）。
• 當 includeInfo 為 true（當 content: true 時的預設值）時，核心約束區塊 — SKILL.md 中到 <!-- CONSTRAINTS:END --> 的內容 — 會作為第一個元素注入（id 前置 __info__），確保模型始終看到必要的規則。

import { info } from '@antv/chart-visualization-skills';

const skillInfo = info('g2');
// => { name: 'antv-g2-chart', description: '...', content: '...', constraintsContent: '...' }

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 注入
}

授權條款

MIT 授權條款 — 詳情請參閱 LICENSE 檔案。