/ 目录 / 演练场 / AntV Chart
● 官方 antvis ⚡ 即开即用

AntV Chart

作者 antvis · antvis/mcp-server-chart

用 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 图表最合适?选项:条形图、柱状图、饼图、折线图。✓ 已复制
    → 有理由的选择(例如 '柱状图——类别 vs 数值,≤20 个类别')
  2. 渲染
    生成一个柱状图,x=category, y=value,标题为 '<Title>'。返回图像 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. 整理数据
    我有 source → destination → value 边 [粘贴]。为 AntV 桑基图整理它们。✓ 已复制
    → 规范化的边数组
  2. 渲染桑基图
    生成桑基图,包含节点标签和链接权重。使用 '3-color' 调色板。✓ 已复制
    → 桑基图图像
  3. 备选树状图
    如果是分层的,改为渲染为树状图或组织树——相同数据,不同图表类型。✓ 已复制
    → 备选可视化

结果: 首次尝试就得到适合你的故事的正确关系可视化。

注意事项
  • 节点过多的桑基图变成意大利面条 — 将小来源合并到 '其他';每层保持 ≤20 个节点
搭配使用: neo4j

组合

与其他 MCP 搭配,撬动十倍杠杆

antv-chart + postgres

一个提示词完成查询 → 图表,用于 PM 报告

从 Postgres 查询过去 12 周的周注册数,然后生成趋势的 AntV 折线图。✓ 已复制
antv-chart + mongodb

聚合 + 可视化文档数据

从 Mongo 聚合本季度各国订单,渲染为降序排列的柱状图。✓ 已复制
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——不要发送 PII 或机密数据

故障排查

常见错误与修复

数据格式无效 / 缺少字段

每个图表类型期望特定的形状;重新检查工具的输入——漏斗图需要 {step, value},桑基图需要 {source, target, value}。

一段时间后返回 URL 404

托管 URL 会过期。如果需要持久化,请在生成后立即将图像保存到本地(文件系统)。

图表不可读——柱子/节点过多

聚合为前 N + 其他,或切换到更适合基数的图表类型(桑基图 / 树状图)。

替代方案

AntV Chart 对比其他方案

替代方案何时用它替代权衡
QuickChart你想要通过 URL 的 Chart.js 风格的图表比 AntV 的小众图表类型少
Mermaid MCP你需要图表(流程图、时序图),而不是数据图表不适合数值数据可视化
Vega-Lite MCP你想要图形语法方法规范更复杂;更灵活

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills