Quickchart

🚀 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();

文档参考资料

• QuickChart 文档
• 图表类型参考

📄 许可证

本项目采用 MIT 许可证。