数据可视化

huqi88/mcp-server-chart
17 Stars 2.8k 次浏览 huqi 更新于 2026-08-23

一个基于TypeScript的MCP服务器,提供图表生成能力,支持超过20种类型的图表。它可以与各种桌面应用程序和平台一起使用,并提供了私有部署和工具过滤选项。

MCP 服务配置

复制以下 JSON 到 OPClaw 或其他 MCP 客户端的配置文件中即可使用

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

该服务需要配置环境变量:DISABLED_TOOLS、SERVICE_ID、VIS_REQUEST_SERVER

服务介绍

MCP 服务器图表 构建 npm 版本 smithery 徽章 npm 许可证

一个用于生成图表的 Model Context Protocol 服务器,使用 AntV

这是一个基于 TypeScript 的 MCP 服务器,提供了图表生成功能。它允许您通过 MCP 工具创建各种类型的图表。您也可以在 Dify 中使用它。

📋 目录

✨ 功能

目前支持 20 多种图表。

  1. generate_area_chart: 生成 面积 图表,用于显示连续自变量下的数据趋势,可以观察整体数据趋势。
  2. generate_bar_chart: 生成 条形 图表,用于比较不同类别的值,适合水平比较。
  3. generate_boxplot_chart: 生成 箱线图,用于显示数据分布,包括中位数、四分位数和异常值。
  4. generate_column_chart: 生成 柱状 图表,用于比较不同类别的值,适合垂直比较。
  5. generate_district_map - 生成 行政区划地图,用于显示行政区域划分和数据分布。
  6. generate_dual_axes_chart: 生成 双轴 图表,用于显示两个具有不同单位或范围的变量之间的关系。
  7. generate_fishbone_diagram: 生成 鱼骨图,也称为石川图,用于识别并显示问题的根本原因。
  8. generate_flow_diagram: 生成 流程图,用于显示过程中的步骤和顺序。
  9. generate_funnel_chart: 生成 漏斗 图表,用于显示不同阶段的数据流失情况。
  10. generate_histogram_chart: 生成 直方图,通过将数据分成区间并计算每个区间内的数据点数量来显示数据分布。
  11. generate_line_chart: 生成 折线 图表,用于显示随时间或其他连续变量变化的数据趋势。
  12. generate_liquid_chart: 生成 液体 图表,用于显示数据的比例,以水填充球体的形式直观表示百分比。
  13. generate_mind_map: 生成 思维导图,用于显示思维过程和层次信息。
  14. generate_network_graph: 生成 网络 图,用于显示节点之间的关系和连接。1. generate_organization_chart: 生成组织结构图,用于展示组织结构和人员关系。
  15. generate_path_map - 生成路径图,用于展示兴趣点(POI)的路线规划结果。
  16. generate_pie_chart: 生成饼图,用于展示数据的比例,将数据分割成扇形区域以显示每个部分的百分比。
  17. generate_pin_map - 生成标记地图,用于显示兴趣点(POI)的分布情况。
  18. generate_radar_chart: 生成雷达图,用于全面展示多维数据,在类似雷达的格式中显示多个维度。
  19. generate_sankey_chart: 生成桑基图,用于展示数据流和流量,以桑基图风格表示不同节点间的数据流动。
  20. generate_scatter_chart: 生成散点图,用于展示两个变量之间的关系,在坐标系上以分散的点表示数据点。
  21. generate_treemap_chart: 生成树状图,用于展示层次结构数据,通过矩形形式展示数据,其中矩形大小代表数据值。
  22. generate_venn_chart: 生成文氏图,用于展示集合之间的关系,包括交集、并集和差集。
  23. generate_violin_chart: 生成小提琴图,用于展示数据分布,结合箱线图和密度图的特点提供更详细的数据分布视图。
  24. generate_word_cloud_chart: 生成词云图,用于展示文本数据中词汇的频率,字体大小表示每个词的频率。

[!NOTE]
上述地理可视化图表生成工具使用AMap服务,目前仅支持在中国范围内的地图生成。

🤖 使用方法

要与桌面应用程序如Claude, VSCode, Cline, Cherry Studio, Cursor等一起使用,请添加以下MCP服务器配置。在Mac系统上:

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

在Windows系统上:

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

此外,您还可以通过HTTP或SSE协议在阿里云, ModelScope, glama.ai, smithery.ai或其他平台上使用它。

🚰 通过SSE或Streamable传输运行

全局安装包。

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

使用您偏好的传输选项运行服务器:

bash

对于SSE传输(默认端点: /sse)

mcp-server-chart --transport sse

对于带有自定义端点的Streamable传输

mcp-server-chart --transport streamable

然后您可以访问服务器:

  • SSE传输: http://localhost:1122/sse
  • Streamable传输: http://localhost:1122/mcp

🎮 CLI选项

运行MCP服务器时,您还可以使用以下CLI选项。通过运行带有-h参数的命令查看选项。

plain
MCP Server Chart CLI

选项:
--transport, -t 指定传输协议: "stdio", "sse" 或 "streamable" (默认: "stdio")
--port, -p 指定SSE或streamable传输的端口 (默认: 1122)
--endpoint, -e 指定传输的端点:
- 对于SSE: 默认为"/sse"
- 对于streamable: 默认为"/mcp"
--help, -h 显示此帮助信息

⚙️ 环境变量

| 变量 | 描述 | 默认值 | 示例 ||----------|:------------|---------|---------|
| VIS_REQUEST_SERVER | 私有部署的自定义图表生成服务 URL | https://antv-studio.alipay.com/api/gpt-vis | https://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 来定制自己的图表生成功能。

json
{
"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 服务,然后通过 env 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: stringsuccess = false 时,返回错误信息。

[!NOTE]
目前私有部署方案不支持地理可视化图表的生成,包括以下三个工具:geographic-district-map, geographic-path-map, geographic-pin-map

🗺️ 生成记录

默认情况下,用户需要自己保存结果,但我们还提供了一个查看图表生成记录的服务,这需要用户为自己生成一个服务标识符并进行配置。

使用支付宝扫描并打开小程序以生成个人服务标识符(点击下方的“我的”菜单,进入“我的服务”页面,点击“生成”按钮,并在成功后点击“复制”按钮):

接下来,您需要将 SERVICE_ID 环境变量添加到 MCP 服务器配置中。例如,Mac 的配置如下(对于 Windows 系统,只需添加 env 变量即可):

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

更新 MCP Server 配置后,您需要重启您的 AI 客户端应用程序,并再次检查是否已成功启动并连接到 MCP Server。然后您可以尝试重新生成地图。生成成功后,您可以前往小程序中的“我的地图”页面查看您的地图生成记录。

🎛️ 工具过滤

您可以使用 DISABLED_TOOLS 环境变量来禁用特定的图表生成工具。当某些工具与您的 MCP 客户端存在兼容性问题或您希望限制可用功能时,这非常有用。

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

可用于过滤的工具名称 请参见 ✨ 功能

🔨 开发安装依赖:

bash
npm install

构建服务器:

bash
npm run build

启动MCP服务器:

bash
npm run start

📄 许可证

MIT@AntV

相关 MCP 服务