Chart

官方

一個使用 AntV 生成視覺化圖表的模型上下文協定伺服器。

GitHub
4.4k
試用此 MCP贊助

你可以用 Chart MCP 做什麼？

  • 生成常見圖表類型 — 透過 generate_bar_chart 和 generate_line_chart 等工具，要求長條圖、折線圖、圓餅圖、散佈圖或區域圖，以視覺化趨勢與比較。
  • 建立專業視覺化圖表 — 請求進階圖表，例如 generate_sankey_chart、generate_venn_chart 或 generate_word_cloud_chart，用於流程、集合關係或文字頻率分析。
  • 建構圖表與地圖 — 使用 generate_flow_diagram、generate_organization_chart 或 generate_district_map 來說明流程、階層或地理資料（以中國為焦點的地圖）。
  • 分析資料分佈 — 產生 generate_boxplot_chart、generate_histogram_chart 或 generate_violin_chart，以探索統計離散程度、離群值與密度。
  • 顯示表格資料 — 使用 generate_spreadsheet 來呈現一般表格或交叉表彙總的樞紐分析表。

文件

MCP Server Chart

一個用於使用 AntV 生成圖表的 Model Context Protocol 伺服器。我們可以使用這個 mcp server 進行_圖表生成_和_數據分析_。

build npm Version npm License codecov Listed on Skillselion Visitors

mcp-server-chart technical digram

這是一個基於 TypeScript 的 MCP 伺服器，提供圖表生成功能。它允許您通過 MCP 工具創建各種類型的圖表。您也可以在 Dify 中使用它。

📋 目錄

✨ 功能特色

目前支援 26+ 種圖表。

mcp-server-chart preview
  1. generate_area_chart：生成 area 圖表，用於顯示連續自變量下數據的趨勢，允許觀察整體數據趨勢。
  2. generate_bar_chart：生成 bar 圖表，用於比較不同類別之間的值，適合水平比較。
  3. generate_boxplot_chart：生成 boxplot，用於顯示數據的分佈，包括中位數、四分位數和異常值。
  4. generate_column_chart：生成 column 圖表，用於比較不同類別之間的值，適合垂直比較。
  5. generate_district_map - 生成 district-map，用於顯示行政區劃和數據分佈。
  6. generate_dual_axes_chart：生成 dual-axes 圖表，用於顯示具有不同單位或範圍的兩個變量之間的關係。
  7. generate_fishbone_diagram：生成 fishbone 圖，也稱為石川圖，用於識別和顯示問題的根本原因。
  8. generate_flow_diagram：生成 flowchart，用於顯示流程的步驟和順序。
  9. generate_funnel_chart：生成 funnel 圖表，用於顯示不同階段的數據流失。
  10. generate_histogram_chart：生成 histogram，用於通過將數據劃分為區間並計算每個區間中的數據點數量來顯示數據的分佈。
  11. generate_line_chart：生成 line 圖表，用於顯示數據隨時間或其他連續變量的趨勢。
  12. generate_liquid_chart：生成 liquid 圖表，用於顯示數據的比例，以水填充球體的形式直觀地表示百分比。
  13. generate_mind_map：生成 mind-map，用於顯示思維過程和層次結構信息。
  14. generate_network_graph：生成 network 圖，用於顯示節點之間的關係和連接。
  15. generate_organization_chart：生成 organizational 圖表，用於顯示組織結構和人員關係。
  16. generate_path_map - 生成 path-map，用於顯示 POI 的路線規劃結果。
  17. generate_pie_chart：生成 pie 圖表，用於顯示數據的比例，將其劃分為由扇形表示的部分，顯示每個部分的百分比。
  18. generate_pin_map - 生成 pin-map，用於顯示 POI 的分佈。
  19. generate_radar_chart：生成 radar 圖表，用於全面顯示多維數據，以雷達格式顯示多個維度。
  20. generate_sankey_chart：生成 sankey 圖表，用於顯示數據流和流量，以桑基圖格式表示數據在不同節點之間的移動。
  21. generate_scatter_chart：生成 scatter 散點圖，用於顯示兩個變量之間的關係，將數據點顯示為坐標系上的散點。
  22. generate_treemap_chart：生成 treemap，用於顯示層次結構數據，以矩形形式顯示數據，矩形的大小代表數據的值。
  23. generate_venn_chart：生成 venn 圖，用於顯示集合之間的關係，包括交集、並集和差集。
  24. generate_violin_chart：生成 violin 圖，用於顯示數據的分佈，結合箱線圖和密度圖的特點，提供更詳細的數據分佈視圖。
  25. generate_word_cloud_chart：生成 word-cloud，用於顯示文本數據中單詞的頻率，字體大小表示每個單詞的頻率。
  26. generate_spreadsheet：生成 spreadsheet 或樞紐分析表，用於顯示表格數據。當提供 'rows' 或 'values' 欄位時，它會呈現為樞紐分析表（交叉表）；否則，它會呈現為普通表格。

[!NOTE] 上述地理可視化圖表生成工具使用 高德地圖服務，目前僅支持中國境內的地圖生成。

🤖 使用方法

要與 Desktop APP 一起使用，例如 Claude、VSCode、Cline、Cherry Studio、Cursor 等，請添加以下 MCP 伺服器配置。在 Mac 系統上：

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"]
    }
  }
}

在 Windows 系統上：

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@antv/mcp-server-chart"]
    }
  }
}

此外，您也可以在 阿里雲、modelscope、glama.ai、smithery.ai 或其他支持 HTTP、SSE 協議的平台上使用它。

🎨 技能使用

如果您使用的是支持技能的 AI IDE（如 Claude Code），您可以使用 chart-visualization 技能自動選擇最佳的圖表類型並生成可視化。

您可以從 https://github.com/antvis/chart-visualization-skills 添加技能，使用：

npx skills add antvis/chart-visualization-skills

然後提供您的數據或描述您想要的可視化。該技能將智能地從 25+ 種圖表類型中選擇並為您生成圖表。

🚰 使用 SSE 或 Streamable 傳輸運行

直接運行

全局安裝套件。

npm install -g @antv/mcp-server-chart

使用您偏好的傳輸選項運行伺服器：

# For SSE transport (default endpoint: /sse)
mcp-server-chart --transport sse

# For Streamable transport with custom endpoint
mcp-server-chart --transport streamable

然後您可以在以下地址訪問伺服器：

  • SSE 傳輸：http://localhost:1122/sse
  • Streamable 傳輸：http://localhost:1122/mcp

Docker 部署

進入 docker 目錄。

cd docker

使用 docker-compose 部署。

docker compose up -d

然後您可以在以下地址訪問伺服器：

  • SSE 傳輸：http://localhost:1123/sse
  • Streamable 傳輸：http://localhost:1122/mcp

🎮 CLI 選項

您也可以在運行 MCP 伺服器時使用以下 CLI 選項。通過運行 cli 搭配 -H 查看命令選項。

MCP Server Chart CLI

Options:
  --transport, -t  Specify the transport protocol: "stdio", "sse", or "streamable" (default: "stdio")
  --host, -h       Specify the host for SSE or streamable transport (default: localhost)
  --port, -p       Specify the port for SSE or streamable transport (default: 1122)
  --endpoint, -e   Specify the endpoint for the transport:
                   - For SSE: default is "/sse"
                   - For streamable: default is "/mcp"
  --help, -H       Show this help message

⚙️ 環境變數

變數描述預設值範例
VIS_REQUEST_SERVER用於私有部署的自定義圖表生成服務 URLhttps://antv-studio.alipay.com/api/gpt-vishttps://your-server.com/api/chart
SERVICE_ID圖表生成記錄的服務標識符-your-service-id-123
DISABLED_TOOLS要停用的工具名稱列表，以逗號分隔-generate_fishbone_diagram,generate_mind_map

📠 私有部署

MCP Server Chart 預設提供免費的圖表生成服務。對於有私有部署需求的用戶，可以嘗試使用 VIS_REQUEST_SERVER 來自定義自己的圖表生成服務。

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "VIS_REQUEST_SERVER": "<YOUR_VIS_REQUEST_SERVER>"
      }
    }
  }
}

您可以使用 AntV 的專案 GPT-Vis-SSR 在私有環境中部署 HTTP 服務，然後通過環境變數 VIS_REQUEST_SERVER 傳遞 URL 地址。

  • 方法：POST
  • 參數：將傳遞給 GPT-Vis-SSR 進行渲染。例如，{ "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }。
  • 返回：HTTP 服務的返回對象。
    • success：boolean 是否成功生成圖表圖像。
    • resultObj：string 圖表圖像 URL。
    • errorMessage：string 當 success = false 時，返回錯誤訊息。

[!NOTE] 私有部署方案目前不支持地理可視化圖表生成，包括 3 個工具：geographic-district-map、geographic-path-map、geographic-pin-map。

🗺️ 生成記錄

預設情況下，用戶需要自行保存結果，但我們也提供查看圖表生成記錄的服務，這需要用戶為自己生成服務標識符並進行配置。

使用支付寶掃碼打開小程序以生成個人服務標識符（點擊下方「我的」菜單，進入「我的服務」頁面，點擊「生成」按鈕，成功後點擊「複製」按鈕）：

my service identifier website

接下來，您需要在 MCP 伺服器配置中添加 SERVICE_ID 環境變數。例如，Mac 的配置如下（對於 Windows 系統，只需添加 env 變數）：

{
  "mcpServers": {
    "AntV Map": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "SERVICE_ID": "***********************************"
      }
    }
  }
}

更新 MCP Server 配置後，您需要重新啟動 AI 客戶端應用程式，並再次檢查您是否已成功啟動並連接到 MCP Server。然後您可以嘗試再次生成地圖。生成成功後，您可以前往小程序的「我的地圖」頁面查看您的地圖生成記錄。

my map records website

🎛️ 工具過濾

您可以使用 DISABLED_TOOLS 環境變數停用特定的圖表生成工具。當某些工具與您的 MCP 客戶端存在兼容性問題，或者您想要限制可用功能時，這非常有用。

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "DISABLED_TOOLS": "generate_fishbone_diagram,generate_mind_map"
      }
    }
  }
}

可用於過濾的工具名稱 請參閱 ✨ 功能特色。

🔨 開發

安裝依賴：

npm install

構建伺服器：

npm run build

啟動 MCP 伺服器：

npm run start

使用 SSE 傳輸啟動 MCP 伺服器：

node build/index.js -t sse

使用 Streamable 傳輸啟動 MCP 伺服器：

node build/index.js -t streamable

📄 許可證

MIT@AntV。