/ 目錄 / 演練場 / AntV Chart
● 官方 antvis ⚡ 即開即用

AntV Chart

作者 antvis · antvis/mcp-server-chart

透過 Ant Group 的 AntV,將原始資料轉換為 25+ 種圖表類型(折線圖、長條圖、桑基圖、漏斗圖、雷達圖、文字雲等),無需自行處理繪圖函式庫。

@antv/mcp-server-chart 能根據簡單的 JSON 規格產生精緻的 SVG/PNG 圖表。工具涵蓋折線圖、長條圖、面積圖、圓餅圖、散佈圖、雷達圖、桑基圖、漏斗圖、樹狀圖、文字雲、箱型圖、直方圖等。輸出結果為 URL 或 base64 PNG,可直接嵌入報告中。

為什麼要用

核心特性

即時演示

實際使用效果

antv-chart.replay ▶ 就緒
0/0

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "antv-chart": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ]
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "antv-chart": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ]
    }
  }
}

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "antv-chart": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ]
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示,然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "antv-chart": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ]
    }
  }
}

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "antv-chart",
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ]
    }
  ]
}

Continue 使用伺服器物件陣列,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "antv-chart": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@antv/mcp-server-chart"
        ]
      }
    }
  }
}

加入 context_servers。Zed 儲存後熱重載。

claude mcp add antv-chart -- npx -y @antv/mcp-server-chart

一行命令搞定。用 claude mcp list 驗證,claude mcp remove 移除。

使用場景

實戰用法: AntV Chart

一個提示詞就將 Postgres 查詢結果轉為圖表

👤 想要視覺化呈現而非 CSV 的分析師 ⏱ ~5 min beginner

何時使用: 剛執行完查詢,下一步自然是「把這個顯示成長條圖」。

前置條件
  • 以列形式呈現的資料(來自其他 MCP 或貼上的內容) — 通常是 postgres/mongodb/duckdb 查詢的輸出結果
步驟
  1. 選擇合適的圖表類型
    根據這份資料 [貼上包含類別與數值的列],哪種 AntV 圖表最合適?選項:bar、column、pie、line。✓ 已複製
    → 有依據的選擇(例如:「column——類別對應數值,類別數 ≤20」)
  2. 渲染圖表
    產生一個 column 圖表,x=類別,y=數值,標題為「<標題>」。回傳圖片 URL。✓ 已複製
    → URL 或 base64 圖片
  3. 調整樣式
    同樣的圖表,但改為依數值降序排列長條,加上資料標籤,並使用單一顏色(青綠色)。✓ 已複製
    → 優化後的圖表圖片

結果: 30 秒內產出可放入報告的圖表圖片,無需碰觸任何繪圖函式庫。

注意事項
  • 類別過多會讓長條圖難以閱讀 — 最多取前 15 項並加上「其他」;資料基數較高時改用樹狀圖或熱力圖
搭配使用: postgres · mongodb

從事件計數視覺化轉換漏斗

👤 成長/產品分析師 ⏱ ~15 min intermediate

何時使用: 手邊有各步驟的事件計數(註冊 → 驗證 → 首次操作 → 付費),需要漏斗圖呈現。

步驟
  1. 取得各步驟計數
    從 Postgres 查詢:統計過去 30 天各漏斗步驟的不重複使用者數,依順序排列。✓ 已複製
    → 步驟 + 計數的列資料
  2. 渲染漏斗圖
    用這些步驟產生一個 AntV 漏斗圖,顯示絕對計數與各步驟間的轉換率 %。✓ 已複製
    → 帶有標籤的漏斗圖圖片
  3. 比較不同區段
    現在並排產生 2 個漏斗圖:行動裝置 vs 桌面。步驟相同;標註最大的流失差異。✓ 已複製
    → 比較視覺化圖表

結果: 一份可直接貼用的漏斗視覺化圖,並附有區段比較。

注意事項
  • 計算非唯一事件會使後續步驟數據虛高 — 每個步驟一律統計不重複的 user_id,而非事件列數
搭配使用: postgres

為關聯關係產生桑基圖或樹狀圖

👤 任何需要說明流程或層級結構的人 ⏱ ~15 min intermediate

何時使用: 想呈現「流量來源 → 落地頁 → 轉換」或組織架構圖。

步驟
  1. 整理資料結構
    我有來源 → 目的地 → 數值的邊資料 [貼上]。請幫我整理成 AntV 桑基圖的格式。✓ 已複製
    → 正規化後的邊陣列
  2. 渲染桑基圖
    產生帶有節點標籤和連結權重的桑基圖,使用「3 色」調色盤。✓ 已複製
    → 桑基圖圖片
  3. 改用樹狀圖呈現
    如果是層級結構,改用樹狀圖或組織樹渲染——相同資料,不同圖表類型。✓ 已複製
    → 替代的視覺化圖表

結果: 一次就找到最適合你故事的關聯視覺化圖表。

注意事項
  • 桑基圖節點過多會變成義大利麵圖 — 將小來源合併為「其他」;每層最多保留 ≤20 個節點
搭配使用: neo4j

組合

與其他 MCP 搭配,撬動十倍槓桿

antv-chart + postgres

一個提示詞完成查詢到圖表,用於 PM 報告

從 Postgres 查詢過去 12 週的每週新增使用者數,然後用 AntV 折線圖呈現趨勢。✓ 已複製
antv-chart + mongodb

彙總並視覺化文件資料

從 Mongo 彙總本季各國訂單數,以降序排列的 column 圖表渲染。✓ 已複製
antv-chart + filesystem

將產生的圖片與報告 markdown 一起儲存

渲染漏斗圖,將 PNG 儲存至 /reports/funnel-<date>.png,並嵌入 /reports/weekly.md 中。✓ 已複製
antv-chart + notion

將圖表嵌入 Notion 報告頁面

產生三張每週 KPI 圖表;建立一個 Notion 頁面,將每張圖表的 URL 以圖片區塊形式嵌入。✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
generate_line_chart / generate_column_chart / generate_bar_chart data: row[], x, y, title?, style? 時間序列/類別比較 free
generate_pie_chart / generate_donut_chart data, value, category, title? 類別數 ≤6 時呈現整體佔比 free
generate_funnel_chart data: [{step, value}] 轉換流程 free
generate_sankey_chart nodes, links: [{source,target,value}] 類別間的流量走向 free
generate_scatter_chart / generate_bubble_chart data, x, y, size?, color? 探索相關性或分佈 free
generate_radar_chart data: {dimensions, series} ≤2 個實體的多維度比較 free
generate_word_cloud_chart data: [{word, weight}] 文字頻率視覺化 free
generate_treemap_chart / generate_histogram_chart / generate_boxplot_chart data, fields 分佈與巢狀類別 free

成本與限制

運行它的成本

API 配額
無需驗證;實際速率限制取決於託管後端(~合理的互動使用量)
每次呼叫 Token 數
規格 + 回應:300–1500 tokens
費用
免費——透過 npx 在本機執行,或對應 AntV 的公開渲染服務
提示
每張圖表的資料點保持在幾百個以內;傳送彙總後的資料,而非原始事件資料。

安全

權限、密鑰、影響範圍

憑證儲存: 無需任何憑證
資料出站: 你在規格中傳入的資料會被送至 AntV 的渲染服務以產生圖片 URL——請勿傳送個人識別資訊或機密資料

故障排查

常見錯誤與修復

Invalid data format / missing field

每種圖表類型都需要特定的資料結構;請重新確認工具的輸入格式——funnel 需要 {step, value},sankey 需要 {source, target, value}。

Returned URL 404 after a while

託管的 URL 有效期限會到期。如需長久保存,請在產生圖表後立即將圖片儲存至本機(filesystem)。

Chart unreadable — too many bars/nodes

彙總為前 N 項加上「其他」,或切換至更適合高基數資料的圖表類型(sankey/treemap)。

替代方案

AntV Chart 對比其他方案

替代方案何時用它替代權衡
QuickChart想要透過 URL 使用 Chart.js 風格的圖表特殊圖表類型少於 AntV
Mermaid MCP需要的是示意圖(流程圖、序列圖),而非資料圖表不適合數值資料視覺化
Vega-Lite MCP偏好圖形語法(grammar-of-graphics)的方式規格較複雜;彈性較高

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills