Chartjs MCP Server

Chart.js MCP服务器

](https://www.npmjs.com/package/@ax-crew/chartjs-mcp-server) ](https://www.npmjs.com/package/@ax-crew/chartjs-mcp-server) 

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

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

📦 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配置

Interactive Chart Demo *带有悬停工具提示和动画的交互式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服务器的最简单方法：

1. 配置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"]
       }
     }
   }

1. 重新启动克劳德桌面

1. 开始创建图表！

试着问克劳德：

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

替代方案：从源代码安装

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

1. 克隆和构建

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

1. 配置本地路径

   {
     "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: 

可用图表类型

高级功能

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

______________________________________________________________________

🛠️ 故障排除

常见问题

图表未生成？

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

配置不起作用？

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

图表看起来不对吗？

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

获取帮助

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

______________________________________________________________________

🔧 对于开发者-贡献

想要改进此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

添加新功能

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

代码规范

• ✅ 具有严格模式的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社区