Quickchart MCP Server

🚀 クイックチャート MCP サーバー

これは TypeScript ベースの MCP サーバーで、QuickChart.io を通じてチャートを生成するために使用されます。MCP ツールを使って様々なタイプのチャートを作成することができます。

📚 概要

このサーバーは QuickChart.io の URL ベースのチャート生成サービスと統合されており、Chart.js の設定を利用してチャート画像を生成します。ユーザーはデータとスタイルのパラメータを提供することで、さまざまなタイプのチャートを生成でき、サーバーはそれをチャートの URL またはダウンロード可能な画像に変換します。

✨ 主な機能

ツール

• generate_chart - QuickChart.io を使用してチャートの URL を生成します。

  • 複数のチャートタイプをサポートします：棒グラフ、折れ線グラフ、円グラフ、ドーナツグラフ、レーダーチャート、極座標面積チャート、散布図、バブルチャート、ラジアルゲージ、速度計
  • ラベル、データセット、色、および追加オプションをカスタマイズできます。
  • 生成されたチャートの URL を返します。

• download_chart - チャート画像をローカルファイルにダウンロードします。

  • チャートの設定と出力パスをパラメータとして受け取ります。
  • チャート画像を指定された場所に保存します。

📊 サポートされるチャートタイプ

• 棒グラフ：異なるカテゴリの値を比較するために使用されます。
• 折れ線グラフ：時間のトレンドを表示するために使用されます。
• 円グラフ：比率データを表示するために使用されます。
• ドーナツグラフ：円グラフに似ていますが、中央が空白です。
• レーダーチャート：多変量データを表示するために使用されます。
• 極座標面積チャート：固定角度の区分の比率データを表示するために使用されます。
• 散布図：データポイントの分布を表示するために使用されます。
• バブルチャート：データポイントのサイズと位置を表示するために使用されます。
• ラジアルゲージ：指標値を表示するために使用されます。
• 速度計：範囲値を表示するために使用されます。

💻 使用例

基本的な使用法

const chart = {
  type: 'bar', // チャートタイプ
  data: {
    labels: ['A', 'B', 'C'], // データラベル
    datasets: [{
      label: 'データセット1',
      data: [65, 59, 80], // データ値
      backgroundColor: '#FF6B6B' // データの背景色
    }]
  },
  options: {
    responsive: true, // レスポンシブかどうか
    scales: {
      y: {
        beginAtZero: true // Y軸をゼロから開始する
      }
    }
  }
};

高度な使用法

# generate_chart ツールを使用する
npx quickchart-server generate-chart --config=config.json --output=output.png

# または直接スクリプトを実行する
node index.js --generate --config=config.json --output=output.png

🛠️ 開発ガイド

依存関係のインストール

npm install

開発サーバーの起動

npm run dev

ツールのテスト

npm test

📚 ドキュメントの参考資料

• QuickChart ドキュメント
• チャートタイプの参考

📄 ライセンス

このプロジェクトは MIT ライセンスを使用しています。