使用说明

Chart.js MCP服务器

一个使用Chart.js v4生成漂亮图表的模型上下文协议（MCP）服务器。非常适合Claude Desktop、Cursor和其他MCP兼容应用程序中的数据可视化。

只需问“创建一个显示公司绩效的气泡图”，即可立即获得专业结果！

📦 NPM包

名字: @ax-crew/chartjs-mcp-server
版本: 3.2.0
节点: >=18
CLI容器: chartjs-mcp-server
NPM: @ax-crew/chartjs-mcp-server

安装

# npm
npm install -D @ax-crew/chartjs-mcp-server

# pnpm
pnpm add -D @ax-crew/chartjs-mcp-server

# yarn
yarn add -D @ax-crew/chartjs-mcp-server

# bun
bun add -d @ax-crew/chartjs-mcp-server

跑

# via npx (recommended for MCP clients)
npx @ax-crew/chartjs-mcp-server

# or if installed locally/globally
chartjs-mcp-server

🎯 这有什么作用

立即将您的数据转换为美观、专业的图表！此MCP服务器连接到您最喜欢的AI应用程序并生成：

📊 条形图 -非常适合比较类别
📈 折线图 -非常适合显示随时间变化的趋势
🥧 饼图和甜甜圈图 -非常适合显示比例
🎯 散点图和气泡图 -非常适合相关性分析
🕸️ 雷达图 -非常适合进行多维比较
🌟 极地面积图 -美丽的径向可视化

所有图表都可以生成为：

📸 PNG图像 （800x600px）-非常适合保存、共享或嵌入
🌐 交互式HTML -带有悬停工具提示和动画的独立div
🧩 JSON配置 -React/Next.js应用程序客户端渲染的原始Chart.js配置

带有悬停工具提示和动画的交互式HTML图表-非常适合web应用程序！

🖼️ 在行动中看到它

以下是您只需一个简单请求即可创建的内容：

Bar Chart Perfect for comparisons	Line Chart Great for trends	Pie Chart Show proportions
Doughnut Chart Modern proportions	Radar Chart Multi-dimensional data	Scatter Chart Correlation analysis
Bubble Chart 3D relationships	Polar Area Chart Radial visualizations	And more chart types coming soon!

🚀 用户-快速设置

系统要求

Node.js 18+ -运行MCP服务器所需

与Claude Desktop一起使用

使用此MCP服务器的最简单方法：

配置Claude桌面

将此添加到您的Claude Desktop配置文件中：

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json 视窗: %APPDATA%/Claude/claude_desktop_config.json
```
{
  "mcpServers": {
    "chartjs": {
      "command": "npx",
      "args": ["@ax-crew/chartjs-mcp-server"]
    }
  }
}
```
重新启动克劳德桌面

开始创建图表！

试着问克劳德：

"Create a bar chart showing sales data: Q1: $50k, Q2: $75k, Q3: $60k, Q4: $90k"

与光标一起使用

添加到光标设置或工作区配置中：

{
  "mcpServers": {
    "chartjs": {
      "command": "npx",
      "args": ["@ax-crew/chartjs-mcp-server"]
    }
  }
}

替代方案：从源代码安装

如果您更喜欢从源代码安装或想要贡献：

克隆和构建

git clone https://github.com/ax-crew/chartjs-mcp-server.git
cd chartjs-mcp-server
npm install && npm run build

配置本地路径

{
  "mcpServers": {
    "chartjs": {
      "command": "node",
      "args": ["/full/path/to/chartjs-mcp-server/dist/index.js"]
    }
  }
}

📖 如何使用

基本用法

配置后，您可以要求您的AI助手使用自然语言创建图表：

“制作我的预算饼图：住房40%，食品25%，交通15%，娱乐20%”
制作一个折线图，显示6个月内的网站访问者：1000年1月、1200年2月、1500年3月、1300年4月、1800年5月、2100年6月
“生成一个比较编程语言的柱状图：JavaScript 65%，Python 45%，Java 35%，Go 25%”

输出格式

您可以在创建图表时指定输出格式：

PNG图像（默认）

"Create a bar chart as a PNG image showing sales data..."

高质量静态图像（800x600px）
非常适合文档、演示和共享
随时随地工作

交互式HTML

"Create an interactive HTML doughnut chart showing project status..."

内嵌Chart.js的自包含HTML div
悬停工具提示和动画
非常适合web应用程序和前端
只需将HTML注入任何网页

JSON配置 （3.2.0中新增）

"Create a bar chart as JSON showing quarterly revenue..."

以JSON格式返回原始Chart.js配置对象
非常适合在React/Next.js应用程序中进行客户端渲染
适用于AI聊天UI，如助理ui 通过 makeAssistantToolUI
看 examples/assistant-ui-integration.example.tsx 完整示例

交互式HTML用法示例：

// The AI returns HTML like this:
const chartHtml = `<div id="chart-container-123">...</div>`;

// You can inject it anywhere:
document.getElementById('dashboard').innerHTML = chartHtml;

// Works with any framework
// React: <div dangerouslySetInnerHTML={{ __html: chartHtml }} />
// Vue: <div v-html="chartHtml"></div>
// Angular: <div [innerHTML]="chartHtml"></div>

可用图表类型

图表类型	最适合	示例用例
酒吧	比较类别	按地区划分的销售额，调查结果
线路	随时间变化的趋势	股价、网站流量
馅饼	整体的一部分	预算明细、市场份额
甜甜圈	有重点的比例	与馅饼相同，但外观更现代
分散	相关性分析	身高与体重、销售额与广告
气泡	3D关系	收入与利润与公司规模
雷达	多因素比较	技能评估、产品特性
极地	径向数据	季节数据、方向分析

高级功能

🎨 自定义颜色：为您的品牌指定配色方案
📊 多个数据集：比较多个数据系列
🏷️ 标签和标题：使用自定义标签添加上下文
📱 响应式：图表适用于任何尺寸
🎛️ Chart.js选项：完全访问Chart.js v4功能
🖱️ 交互式元素：工具提示、悬停效果和动画（HTML格式）
🔗 框架不可知：HTML输出适用于React、Vue、Angular和vanilla JS

🛠️ 故障排除

常见问题

图表未生成？

检查客户端中的MCP服务器是否配置正确
验证服务器是否正在运行： ps aux | grep chartjs
尝试重新启动MCP客户端（Claude Desktop、Cursor等）

配置不起作用？

检查配置文件中的JSON语法
确保文件路径正确
检查文件权限

图表看起来不对吗？

验证您的数据格式是否符合Chart.js要求
检查缺少的必填字段（标签、数据集等）
先尝试一个更简单的图表来测试连接

获取帮助

检查例子 -参见工作图配置
运行测试 - npm test 验证一切正常
检查日志 -在MCP客户端中查找错误消息
打开一个问题 -我们是来帮忙的！

🔧 对于开发者-贡献

想要改进此MCP服务器吗？我们欢迎捐款！

开发环境

# Clone and setup
git clone https://github.com/ax-crew/chartjs-mcp-server.git
cd chartjs-mcp-server
npm install

# Development workflow
npm run dev          # Watch mode for development
npm test            # Run tests
npm run build       # Build for production
npm run test:watch  # Test in watch mode

项目结构

chartjs-mcp-server/
├── src/
│   ├── index.ts           # Main MCP server implementation
│   └── chart-schema.json  # Chart.js v4 validation schema
├── examples/              # Example configurations & outputs
│   ├── *.json            # Chart configuration examples
│   ├── *.png             # Generated chart images
│   └── README.md         # Developer examples guide
├── test/
│   └── chart-server.test.js # Comprehensive test suite
├── package.json          # Dependencies and scripts
└── tsconfig.json         # TypeScript configuration

关键技术

TypeScript -类型安全开发
Chart.js v4 -图表生成引擎
节点画布 -服务器端渲染
MCP协议 -模型上下文协议实现
Node.js测试运行器 -本地测试（无外部deps）

测试

我们进行了全面的测试以确保可靠性：

npm test                  # 27 tests across 10 suites
npm run test:integration  # CLI-based integration tests
npm run test:watch        # Development watch mode

添加新功能

添加图表类型支持 在 src/index.ts
创建示例配置 在 examples/
添加测试 在 test/chart-server.test.js
更新文档 在两个README文件中
提交拉取请求

代码规范

✅ 具有严格模式的TypeScript
✅ 全面的错误处理
✅ 所有功能的测试覆盖率
✅ 清晰、有文件记录的代码
✅ MCP协议合规性

📋 API 参考

MCP工具： `generateChart`

服务器公开了一个用于图表生成的主要工具：

参数：

chartConfig （object）-完成Chart.js v4配置
outputFormat （字符串，可选）-输出格式： 'png' （默认）， 'html'，或 'json'
saveToFile （布尔值，可选）-将PNG保存到文件（仅适用于PNG格式）

退货：

PNG成功： { success: true, buffer: Buffer, message: string } 或 { success: true, pngFilePath: string, message: string }
HTML成功： { success: true, htmlSnippet: string, message: string }
JSON成功： { success: true, jsonConfig: object, message: string }
错误： { success: false, error: string, message: string }

例子：

{
  "type": "bar",
  "data": {
    "labels": ["Q1", "Q2", "Q3", "Q4"],
    "datasets": [{
      "label": "Sales",
      "data": [50000, 75000, 60000, 90000],
      "backgroundColor": "rgba(54, 162, 235, 0.8)"
    }]
  },
  "options": {
    "responsive": true,
    "plugins": {
      "title": {
        "display": true,
        "text": "Quarterly Sales"
      }
    }
  }
}

📦 包含什么

✅ 完整的MCP服务器 -可与任何MCP客户端一起使用
✅ 8图表类型 -支持所有主要的Chart.js图表类型
✅ 三种输出格式 -PNG图像、交互式HTML div和JSON配置
✅ 示例配置 -8个工作示例 /examples
✅ 视觉参考 -为每种图表类型生成PNG样本
✅ 综合测试 -27项测试确保可靠性
✅ TypeScript支持 -全类型安全和IDE支持
✅ 错误处理 -优雅的错误处理和验证
✅ 文档 -完整的设置和使用指南

🔗 资源

📚 Chart.js文档
🔌 模型上下文协议
🎨 示例图表 -查看所有支持的图表类型
📝 更新日志 -版本历史和发行说明
🐛 问题追踪器
💬 讨论

📄 许可证

麻省理工学院许可证-请在您的项目中自由使用！

🌟 明星这个Repo！

如果这个MCP服务器可以帮助您创建令人惊叹的图表，请给它一颗星⭐ 帮助别人发现它！

制作❤️ 对于MCP社区