icon for mcp server

VChart

STDIO

VChart MCP server for generating interactive charts and visualizations with AI assistants

VChart MCP Server

一个用于 VChart 可视化库的模型上下文协议（MCP）服务器，使 AI 助手能够生成交互式图表和可视化。

功能特性

图表输出格式

每个图表都可以生成多种格式：

  • Image - PNG/JPG 图像格式，用于嵌入（默认值）
  • Spec - VChart 规范对象，用于编程使用
  • HTML - 交互式 HTML 图表，用于网页显示

支持的图表类型和工具

generate_area_chart - 面积图

用于显示时间趋势的面积/区域图表，适合可视化趋势和累积数据。

参数：

  • dataTable - 数据对象数组（必需）
  • xField - X 轴字段名（必需）
  • yField - Y 轴字段名（必需）
  • chartOutput - 输出格式："spec" | "image" | "html"，默认值为"image"
  • width - 图表宽度（默认：500）
  • height - 图表高度（默认：500）
  • colorField - 颜色映射字段（可选）
  • title - 图表标题（可选）
  • chartTheme - 图表主题（可选）

示例：

{
  "dataTable": [
    { "month": "1月", "sales": 1200 },
    { "month": "2月", "sales": 1500 },
    { "month": "3月", "sales": 1800 }
  ],
  "xField": "month",
  "yField": "sales",
  "chartOutput": "image",
  "title": "月度销售趋势"
}

generate_dual_axis_chart - 双轴图

具有两个 Y 轴的组合图表，用于比较两个具有不同量纲的指标。

参数：

  • dataTable - 数据对象数组（必需）
  • xField - X 轴字段名（必需）
  • yField - 两个 Y 轴字段名数组（必需）
  • chartOutput - 输出格式："spec" | "image" | "html"，默认值为"image"
  • width - 图表宽度（默认：500）
  • height - 图表高度（默认：500）
  • leftYAxisTitle - 左 Y 轴标题（可选）
  • rightYAxisTitle - 右 Y 轴标题（可选）

示例：

{
  "dataTable": [
    { "month": "1月", "revenue": 12000, "users": 150 },
    { "month": "2月", "revenue": 15000, "users": 180 }
  ],
  "xField": "month",
  "yField": ["revenue", "users"],
  "chartOutput": "image",
  "leftYAxisTitle": "收入（元）",
  "rightYAxisTitle": "用户数"
}

generate_bar_chart - 柱状图

用于分类数据比较的柱状图，适合展示不同类别之间的数值对比。

参数：

  • dataTable - 数据对象数组（必需）
  • xField - X 轴字段名（必需）
  • yField - Y 轴字段名（必需）
  • chartOutput - 输出格式："spec" | "image" | "html"，默认值为"image"
  • width - 图表宽度（默认：500）
  • height - 图表高度（默认：500）
  • colorField - 颜色映射字段（可选）
  • title - 图表标题（可选）
  • chartTheme - 图表主题（可选）

示例：

{
  "dataTable": [
    { "category": "产品A", "sales": 1200 },
    { "category": "产品B", "sales": 1500 },
    { "category": "产品C", "sales": 800 }
  ],
  "xField": "category",
  "yField": "sales",
  "chartOutput": "image",
  "title": "产品销售对比"
}

generate_line_chart - 折线图

用于显示数据随时间变化的趋势，适合展示连续数据的变化轨迹。

参数：

  • dataTable - 数据对象数组（必需）
  • xField - X 轴字段名（必需）
  • yField - Y 轴字段名（必需）
  • chartOutput - 输出格式："spec" | "image" | "html"，默认值为"image"
  • width - 图表宽度（默认：500）
  • height - 图表高度（默认：500）
  • colorField - 颜色映射字段（可选）
  • title - 图表标题（可选）
  • chartTheme - 图表主题（可选）

示例：

{
  "dataTable": [
    { "date": "2024-01", "value": 120 },
    { "date": "2024-02", "value": 150 },
    { "date": "2024-03", "value": 180 }
  ],
  "xField": "date",
  "yField": "value",
  "chartOutput": "image",
  "title": "月度趋势"
}

generate_pie_chart - 饼图

用于展示各部分占整体的比例关系，适合显示分类数据的构成情况。

参数：

  • dataTable - 数据对象数组（必需）
  • angleField - 角度字段名（必需）
  • colorField - 颜色字段名（必需）
  • chartOutput - 输出格式："spec" | "image" | "html"，默认值为"image"
  • width - 图表宽度（默认：500）
  • height - 图表高度（默认：500）
  • title - 图表标题（可选）
  • chartTheme - 图表主题（可选）

示例：

{
  "dataTable": [
    { "category": "移动端", "value": 65 },
    { "category": "PC端", "value": 25 },
    { "category": "平板", "value": 10 }
  ],
  "angleField": "value",
  "colorField": "category",
  "chartOutput": "image",
  "title": "设备使用分布"
}

generate_scatter_chart - 散点图

用于展示两个变量之间的相关关系，适合发现数据中的模式和异常值。

参数：

  • dataTable - 数据对象数组（必需）
  • xField - X 轴字段名（必需）
  • yField - Y 轴字段名（必需）
  • chartOutput - 输出格式："spec" | "image" | "html"，默认值为"image"
  • width - 图表宽度（默认：500）
  • height - 图表高度（默认：500）
  • colorField - 颜色映射字段（可选）
  • sizeField - 大小映射字段（可选）
  • title - 图表标题（可选）
  • chartTheme - 图表主题（可选）

示例：

{
  "dataTable": [
    { "height": 170, "weight": 65, "gender": "女" },
    { "height": 180, "weight": 75, "gender": "男" },
    { "height": 165, "weight": 60, "gender": "女" }
  ],
  "xField": "height",
  "yField": "weight",
  "colorField": "gender",
  "chartOutput": "image",
  "title": "身高体重关系"
}

generate_radar_chart - 雷达图

用于显示多个维度的数据，适合展示多指标评估和对比。

参数：

  • dataTable - 数据对象数组（必需）
  • categoryField - 类别字段名（必需）
  • valueField - 数值字段名（必需）
  • chartOutput - 输出格式："spec" | "image" | "html"，默认值为"image"
  • width - 图表宽度（默认：500）
  • height - 图表高度（默认：500）
  • colorField - 颜色映射字段（可选）
  • title - 图表标题（可选）
  • chartTheme - 图表主题（可选）

示例：

{
  "dataTable": [
    { "dimension": "技术", "score": 85, "type": "团队A" },
    { "dimension": "沟通", "score": 90, "type": "团队A" },
    { "dimension": "创新", "score": 75, "type": "团队A" }
  ],
  "categoryField": "dimension",
  "valueField": "score",
  "colorField": "type",
  "chartOutput": "image",
  "title": "团队能力评估"
}

安装

先决条件

  • Node.js: ^22.7.5 (@modelcontextprotocol/inspector 需要该版本要求)

从 npm 安装

npm install -g @visactor/vchart-mcp-server

从源码安装

git clone https://github.com/VisActor/vchart-mcp-server.git
cd vchart-mcp-server
npm install
npm run build

使用方法

要在桌面应用（如 Trae、Claude、VSCode、Cline、Cherry Studio、Cursor 等）中使用，请添加以下 MCP 服务器配置：

MacOS

{
  "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"]
    }
  }
}

AI 对话中的使用示例

配置完成后，你可以要求 AI 助手创建图表：

"创建一个显示月度销售数据的面积图"

助手将使用 generate_area_chart 工具创建可视化

"生成一个比较收入和用户增长的双轴图表"

助手将使用 generate_dual_axis_chart 工具和适当的参数

"为我展示一个季度表现的交互式 HTML 柱状图"

助手将生成一个可以嵌入网页的 HTML 图表

开发

构建

npm run build

开发模式（自动重建）

npm run watch

测试

# 测试图表生成
npm run test-tool

# 运行 MCP Inspector 进行调试
npm run inspector

调试

由于 MCP 服务器通过 stdio 通信，调试可能具有挑战性。使用 MCP Inspector 进行开发：

npm run inspector

Inspector 在 http://localhost:3000 提供 Web 界面，用于测试工具和调试。

环境变量

许可证

MIT 许可证

贡献

欢迎贡献！请随时提交问题和拉取请求。

相关项目

Be the First to Experience MCP Now