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 許可證。