MCPServerChart实用图表MCP快速入门指南

1. 什么是 MCPServerChart？

• 简单说：它是一个“图表生成工具”，一个可视化 mcp 包含 25+个视觉图表。用于图表生成和数据分析。通过命令行启动后，你可以用 HTTP 请求让它生成各种图表（如折线图、柱状图等）。
• 适用场景：适合开发者在 AI 助手（如 Claude、Cursor）中调用，或集成到自己的应用里动态生成图表。

2. 安装步骤

前提条件

• 电脑已安装Node.js （建议最新版）。

命令行安装

打开终端（Windows 用 CMD 或 PowerShell，Mac/Linux 用 Terminal），输入以下命令：

npx -y @antv/mcp-server-chart

• 说明：
  • npx 是 Node.js 自带的工具，用于临时运行 npm 包。
  • -y 表示直接确认安装，无需手动选择版本。

全局安装（可选）

如果想在任意位置使用，可以全局安装：

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

3. 启动服务

安装完成后，在终端输入以下命令启动服务器：

mcp-server-chart

• 默认端口：服务会运行在 http://localhost:1122。
• 修改端口（可选）：

mcp-server-chart --port 3000  # 改为 3000 端口

4. 调用服务生成图表

方式 1：用浏览器或 Postman 测试

1. 打开浏览器，访问：

http://localhost:1122/mcp?request={"type":"line","data":[{"time":"2025-05","value":512},{"time":"2025-06","value":1024}]}

1. 会返回一个 JSON 响应，包含图表图片的 URL。

方式 2：用代码调用（Python 示例）

import requestsurl = "http://localhost:1122/mcp"
data = {"type": "bar",  # 图表类型：柱状图"data": [{"category": "苹果", "sales": 150},{"category": "香蕉", "sales": 200}]
}response = requests.post(url, json=data)
print(response.json())  # 会返回图表图片的 URL

方式 3：在 AI 工具中使用（如 Claude）

在 Claude 的设置里添加 MCP 服务器：

• 服务器地址：http://localhost:1122
• 工具名称：chart

配置按如下方式：

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

对 Claude 说：“生成一个折线图，展示 2025 年 5 月和 6 月的销售额数据。”

• Claude 会自动调用 MCPServerChart 生成图表并返回。

5. 配置私有部署（可选）

如果想把服务部署到自己的服务器（而非本地），可以设置环境变量：

export VIS_REQUEST_SERVER="http://你的服务器地址:端口"

然后在代码中指定该地址即可。

6. 常见问题

Q1：启动失败，提示端口被占用？

• 原因：默认端口 1122 已被其他程序占用。
• 解决：启动时指定其他端口，如 --port 3000。

Q2：生成的图表是空白？

• 检查数据格式：确保 data 字段的格式正确，例如：

{"type": "line","data": [{"time": "2025-05", "value": 512},{"time": "2025-06", "value": 1024}]
}

Q3：如何生成更多图表类型？

• 支持的图表类型包括：line（折线图）、bar（柱状图）、pie（饼图）等，共 25+ 种。
• 完整列表参考：

  AntV 官方文档

  。

7. 总结

1. 安装：npx -y @antv/mcp-server-chart
2. 启动：mcp-server-chart
3. 调用：通过 HTTP POST 发送图表配置
4. 结果：获取图表图片的 URL 或直接展示

如果有具体错误或需要更详细的功能（如自定义样式），可以告诉我，我会进一步帮你解决！