Quickchart

🚀 Quickchart-server MCP サーバー

QuickChart.io を通じてグラフを生成するためのモデルコンテキストプロトコル (Model Context Protocol) サーバーです。

これは TypeScript ベースの MCP サーバーで、グラフ生成機能を提供します。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 ライセンスの下で提供されています。