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 = `
...
`;
// You can inject it anywhere:
document.getElementById('dashboard').innerHTML = chartHtml;
// Works with any framework
// React:
// Vue:
// Angular:
可用图表类型
| 图表类型 | 最适合 | 示例用例 |
|---|---|---|
| 酒吧 | 比较类别 | 按地区划分的销售额，调查结果 |
| 线路 | 随时间变化的趋势 | 股价、网站流量 |
| 馅饼 | 整体的一部分 | 预算明细、市场份额 |
| 甜甜圈 | 有重点的比例 | 与馅饼相同，但外观更现代 |
| 分散 | 相关性分析 | 身高与体重、销售额与广告 |
| 气泡 | 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支持
- ✅ 错误处理 -优雅的错误处理和验证
- ✅ 文档 -完整的设置和使用指南
______________________________________________________________________
🔗 资源
______________________________________________________________________
📄 许可证
麻省理工学院许可证-请在您的项目中自由使用！
______________________________________________________________________
🌟 明星这个Repo！
如果这个MCP服务器可以帮助您创建令人惊叹的图表，请给它一颗星⭐ 帮助别人发现它！
制作❤️ 对于MCP社区