🚀 Quickchart-server MCP 服务器
一个用于通过 QuickChart.io 生成图表的模型上下文协议 (Model Context Protocol) 服务器。它基于 TypeScript 构建，能让您借助 MCP 工具，利用数据和样式参数生成各类图表。
🚀 快速开始
此服务器与 QuickChart.io 的基于 URL 的图表生成功能集成，借助 Chart.js 配置生成图表图像。用户只需提供数据和样式参数，就能创建不同类型的图表，服务器会将这些参数转换为图表的 URL 或可下载的图像。
✨ 主要特性
工具
-
generate_chart- 使用 QuickChart.io 生成图表 URL- 支持多种图表类型：柱状图、折线图、饼图、环形图、雷达图、极坐标面积图、散点图、气泡图、径向仪表盘、速度表
- 可自定义标签、数据集、颜色和附加选项
- 返回生成图表的 URL
-
download_chart- 将图表图像下载到本地文件- 接收图表配置和输出路径作为参数
- 将图表图像保存到指定位置
支持的图表类型
- 柱状图：用于比较不同类别的值
- 折线图：用于显示趋势随时间的变化
- 饼图：用于展示比例数据
- 环形图：类似于饼图，但中间为空白
- 雷达图：用于显示多变量数据
- 极坐标面积图：用于以固定角度分段显示比例数据
- 散点图：用于显示数据点之间的关系
- 气泡图：用于通过气泡的大小、颜色和位置展示三维数据
- 径向仪表盘：用于显示度量指标
- 速度表：用于显示实时速度或状态
💻 使用示例
基础用法
{
"type": "bar", // 图表类型
"data": {
"labels": ["A", "B", "C"], // X 轴标签
"datasets": [
{
"label": "数据集 1",
"data": [65, 59, 80], // 数据值
"backgroundColor": "#FF6B6B" // 数据背景颜色
},
{
"label": "数据集 2",
"data": [28, 48, 40],
"backgroundColor": "#4ECDC4"
}
]
},
"options": {
"title": {
"text": "示例图表", // 图表标题
"position": "top" // 标题位置
},
"scales": {
"y": {
"beginAtZero": true // Y 轴从零开始
}
}
}
}
📚 详细文档
开发指南
安装依赖
使用 npm 或 yarn 安装所需的依赖包：
npm install chart.js quickchart
# 或者
yarn add chart.js quickchart
示例代码
const { QuickChart } = require('quickchart');
async function generateChart() {
const config = {
type: 'bar',
data: {
labels: ['A', 'B', 'C'],
datasets: [{
label: '数据集 1',
data: [65, 59, 80],
backgroundColor: '#FF6B6B'
}]
}
};
const chartUrl = await QuickChart.create(config);
console.log('图表 URL:', chartUrl);
}
generateChart();
安装说明
安装方法
方法一：使用 npm 或 yarn
npm install quickchart-server
# 或者
yarn add quickchart-server
方法二：使用 CDN
在 HTML 文件中引入：
<script src="https://cdn.jsdelivr.net/npm/quickchart@latest/dist/index.umd.js">script>
配置示例
const { QuickChartServer } = require('quickchart-server');
const server = new QuickChartServer({
port: 3000, // 服务端口
width: 800, // 图表宽度
height: 600 // 图表高度
});
server.start();
文档参考资料
📄 许可证
本项目采用 MIT 许可证。