chartjs-generator

Chart.js ジェネレーター

概要

このスキルは、主要なすべての種類のチャートに対応し、Chart.js を使用してプロフェッショナルでインタラクティブなチャートを生成します。Chart.js は、レスポンシブなデータ可視化を作成するための、強力で柔軟な JavaScript ライブラリです。このスキルは、MkDocs で構築された教育コンテンツやドキュメントサイトへの埋め込みに適した、完全な MicroSim パッケージを作成します。インテリジェントブックでのデフォルトの配置では、パディングとマージンを最小限にした iframe を使用します。 チャート領域の上や下に、分析や補足ドキュメントを追加しないでください。

対応するチャートの種類

Chart.js は、次の種類のチャートに対応しています。

1. 折れ線 - 時系列、傾向、連続データ
2. 棒 - 比較、カテゴリデータ、横向きまたは縦向き
3. 円 - 比率、パーセンテージ、全体に対する部分の関係
4. ドーナツ - 円チャートと同様ですが、中央のスペースにラベルを表示できます
5. レーダー - 多次元データ、スパイダー／ウェブチャート
6. 極域 - 円チャートと同様ですが、半径が変化します
7. バブル - 3 次元データ（x、y、サイズ）
8. 散布図 - 相関、分布、関係性

このスキルを使用する場合

ユーザーから次のような依頼があった場合に、このスキルを使用します。

• データの可視化：データを提示するためのあらゆるチャートやグラフ
• 比較：棒チャート、グループ化棒チャート、積み上げ棒チャート
• 傾向：折れ線チャート、面チャート、複数の折れ線チャート
• 比率：円チャート、ドーナツチャート
• 分布：散布図、バブルチャート
• 多次元データ：レーダーチャート、バブルチャート
• インタラクティブなチャート：ホバーツールチップ、クリック可能な要素、アニメーション

よくあるトリガーフレーズ：

• 「…を示す［チャートの種類］を作成して」
• 「［データ］を［チャートの種類］として可視化して…」
• 「…のインタラクティブなチャートを作成して」
• 「…を示すグラフを生成して」

ワークフロー

ステップ 1：チャートの種類を決める

ユーザーがチャートの種類を指定していない場合は、対応している種類から選ぶように尋ねます。

AskUserQuestion ツールで次の選択肢を提示します：

1. 折れ線チャート - 時間の経過に伴う傾向や連続データに最適
2. 棒チャート - カテゴリや離散データの比較に最適
3. 円／ドーナツチャート - 比率やパーセンテージの表示に最適
4. バブル／散布図 - 多次元データや相関データに最適
5. レーダーチャート - カテゴリ間で複数の変数を比較するのに最適
6. 極域チャート - 差異を強調して比率を示すのに最適

ステップ 2：データと要件を収集する

チャートを生成する前に、次の情報を収集します。

1. データ構造：どのようなデータを可視化する必要がありますか？

   • データポイント／値
   • ラベル／カテゴリ
   • 複数のデータセット（該当する場合）
   • 期間またはカテゴリ
   • 測定単位

2. チャートの設定：

   • チャートのタイトル
   • 軸ラベル（棒、折れ線、散布図、バブルチャートの場合）
   • 凡例の要件
   • 色の組み合わせの希望
   • 特別な機能（積み上げ、グループ化、塗りつぶし領域など）

3. コンテキスト：可視化の目的は何ですか？

   • 教育コンテンツ
   • データ分析
   • レポートまたはプレゼンテーション
   • ダッシュボードのコンポーネント

4. 統合：チャートはどこで使用されますか？

   • 単独のページ
   • ドキュメントへの埋め込み
   • MkDocs サイトへの統合

ステップ 3：ディレクトリ構造を作成する

次のパターンに従って、MicroSim 用の新しいディレクトリを作成します。

docs/sims/<chart-name>/
├── main.html         # Main visualization file
├── style.css         # Styling
└── index.md          # Documentation (if part of MkDocs)

命名規則：説明的で URL に適したディレクトリ名には、ケバブケース（小文字とハイフン）を使用します（例：sales-trend-chart、market-share-pie、student-performance-radar）。

ステップ 4：Chart.js を使用して main.html を作成する

次の構成でメインの HTML ファイルを生成します。

1. HTML の基本構造：適切なメタタグを含めます
2. Chart.js CDN のインポート：https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js
3. グラフ用の Canvas 要素
4. 任意の分析／凡例セクション：依頼がない限り、分析やドキュメントは追加しないでください
5. JavaScript の実装：
   • データ配列／オブジェクト
   • カラースキームの設定
   • 選択したグラフの種類に応じた Chart.js の設定
   • カスタムプラグイン（必要な場合）
   • インタラクティブ機能（ツールチップ、凡例、アニメーション）
   • ツールチップは常に使用してください

グラフの種類ごとの主な Chart.js 設定：

折れ線グラフ

{
    type: 'line',
    data: {
        labels: ['Jan', 'Feb', 'Mar', ...],
        datasets: [{
            label: 'Dataset 1',
            data: [12, 19, 3, 5, 2, 3],
            borderColor: 'rgb(75, 192, 192)',
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            tension: 0.1  // Curve smoothness
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: { beginAtZero: true }
        }
    }
}

棒グラフ

{
    type: 'bar',
    data: {
        labels: ['Category A', 'Category B', ...],
        datasets: [{
            label: 'Dataset 1',
            data: [65, 59, 80, 81, 56, 55],
            backgroundColor: 'rgba(54, 162, 235, 0.8)',
            borderColor: 'rgb(54, 162, 235)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        scales: {
            y: { beginAtZero: true }
        }
    }
}

円グラフ／ドーナツグラフ

{
    type: 'pie',  // or 'doughnut'
    data: {
        labels: ['Red', 'Blue', 'Yellow', ...],
        datasets: [{
            data: [300, 50, 100],
            backgroundColor: [
                'rgba(255, 99, 132, 0.8)',
                'rgba(54, 162, 235, 0.8)',
                'rgba(255, 206, 86, 0.8)'
            ]
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { position: 'top' }
        }
    }
}

レーダーチャート

{
    type: 'radar',
    data: {
        labels: ['Strength', 'Speed', 'Intelligence', ...],
        datasets: [{
            label: 'Player 1',
            data: [65, 59, 90, 81, 56],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgb(255, 99, 132)',
            pointBackgroundColor: 'rgb(255, 99, 132)'
        }]
    },
    options: {
        responsive: true,
        scales: {
            r: {
                beginAtZero: true,
                max: 100
            }
        }
    }
}

バブルチャート

{
    type: 'bubble',
    data: {
        datasets: [{
            label: 'Dataset 1',
            data: [
                { x: 20, y: 30, r: 15 },  // r = bubble radius
                { x: 40, y: 10, r: 10 }
            ],
            backgroundColor: 'rgba(255, 99, 132, 0.8)'
        }]
    },
    options: {
        responsive: true,
        scales: {
            x: { min: 0, max: 100 },
            y: { min: 0, max: 100 }
        }
    }
}

散布図

{
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Dataset 1',
            data: [
                { x: -10, y: 0 },
                { x: 0, y: 10 },
                { x: 10, y: 5 }
            ],
            backgroundColor: 'rgba(255, 99, 132, 0.8)'
        }]
    },
    options: {
        responsive: true,
        scales: {
            x: { type: 'linear', position: 'bottom' }
        }
    }
}

重要な考慮事項：

• レスポンシブデザイン：responsive: true と適切なアスペクト比を設定します
• 色のアクセシビリティ：見分けやすく、コントラストの高い色を使用します
• ツールチップ：関連情報が表示されるようにカスタマイズします
• 凡例：凡例を適切な位置（top、bottom、left、right）に配置します
• アニメーション：用途に応じて有効または無効にします
• データラベル：必要に応じて、データラベル用の Chart.js プラグインを使用します

ステップ 5：style.css を作成する

プロフェッショナルなスタイルの CSS を生成します。

1. リセットと基本スタイル：ブラウザー間の一貫性を保つため、初期スタイルを整えます
2. グラフのコンテナー：適切なサイズ、パディング、ボックスシャドウを設定します
3. 凡例／分析コンテナー：補足情報のスタイルを設定します
4. インタラクティブ要素：ホバー効果とトランジションを設定します
5. レスポンシブデザイン：モバイル／タブレット向けのメディアクエリーを設定します
6. 印刷用スタイル：印刷向けの追加 CSS は作成しないでください

主なデザイン原則：

• すっきりとしたモダンな外観にします
• 狭い余白の書籍内に iframe を使用してグラフを配置することを想定します
• 明確な視覚的階層を設けます
• 控えめなシャドウとボーダーを追加します
• 滑らかなトランジションを含めます
• 十分なコントラストを確保し、アクセシビリティに配慮します
• あらゆるサイズでテキストを読みやすくします

ステップ 6：index.md のドキュメントを作成する

グラフが MkDocs サイトの一部である場合は、次の内容を含む包括的なドキュメントを作成します。

1. YML メタデータ：タイトルと説明を追加します
2. タイトルと概要：ビジュアライゼーションの簡単な説明
3. 埋め込み iframe：グラフをページ内に表示します
4. 全画面表示へのリンク：「View MicroSim Fullscreen」ボタン付きの、main.html への Markdown リンク
5. 読み取り方のガイド：グラフの読み方を説明します
6. 機能セクション：インタラクティブ要素を列挙します
7. カスタマイズガイド：次の変更方法を詳しく説明します
   • データ構造
   • 色とスタイル
   • グラフのオプション
   • レスポンシブ動作
   • アニメーション
8. 技術的な詳細：依存関係、ブラウザー互換性、ファイル構成
9. 使用例：この種類のグラフを活用できるその他の用途
10. 参考資料：Chart.js のドキュメントや関連リソースへのリンク

ドキュメント構成のテンプレート：

---
title: [Chart Title]
description: [brief description of chart]
---

# [Chart Title]

[Brief description]

## Interactive Chart

<iframe src="main.html" width="100%" height="500" scrolling="no"></iframe>

[View Fullscreen](main.html){ .md-button .md-button--primary }

## Overview

[Detailed explanation of what the chart shows]

## Features

### Interactive Elements
- Hover tooltips showing detailed data
- Clickable legend items to show/hide datasets
- Smooth animations on load and update

### Visual Design
- Color-coded categories
- Clear axis labels and grid lines
- Responsive layout

## Customization Guide

### Changing the Data

To modify the chart data, edit the `data` object in `main.html`:

```javascript
const data = {
    labels: ['Your', 'Labels', 'Here'],
    datasets: [{
        label: 'Your Dataset',
        data: [10, 20, 30, 40]
    }]
};

色の調整

backgroundColor プロパティと borderColor プロパティを変更して、カラースキームをカスタマイズします。

backgroundColor: [
    'rgba(255, 99, 132, 0.8)',
    'rgba(54, 162, 235, 0.8)',
    // Add more colors...
]

グラフのオプション

options オブジェクトでグラフの動作を変更します。

options: {
    responsive: true,
    maintainAspectRatio: true,
    aspectRatio: 2,  // Width:height ratio
    plugins: {
        title: { display: true, text: 'Your Title' },
        legend: { position: 'top' }
    }
}

技術的な詳細

• ライブラリ：Chart.js 4.4.0
• ブラウザー互換性：すべての最新ブラウザー（Chrome、Firefox、Safari、Edge）
• 依存関係：Chart.js（CDN から読み込み）
• レスポンシブ対応：はい。コンテナーの幅に合わせて調整されます

使用例

この種類のグラフは、次の用途に役立ちます。

• [関連する使用例を列挙]

参考資料

- [Chart.js Documentation](https://www.chartjs.org/docs/latest/)
- [Chart Type Guide](https://www.chartjs.org/docs/latest/charts/[type].html)

ステップ 7：ナビゲーションに統合する（MkDocs）

mkdocs.yml のナビゲーションに、必ずグラフを追加してください。

- MicroSims:
    - Introduction: sims/index.md
    - [Chart Name]: sims/[chart-name]/index.md
    - [Other sims...]: ...

項目はアルファベット順に配置してください。

ステップ 8：テストと検証

チャートを完成と判断する前に、次の項目を確認します。

1. 視覚的なテスト：

   • ブラウザーで main.html を直接開きます
   • 該当する場合は mkdocs serve でテストします
   • すべてのブレークポイント（デスクトップ、タブレット、モバイル）を確認します
   • データが正しく表示されることを確認します
   • ラベルと凡例が読みやすいことを確認します

2. インタラクティブなテスト：

   • チャート要素にカーソルを合わせ、ツールチップを確認します
   • 凡例項目をクリックし、データセットの表示・非表示を切り替えます
   • アニメーションをテストします（ページを再読み込みします）
   • 異なるブラウザーでテストします

3. ドキュメントの確認：

   • すべてのコード例が正確であることを確認します
   • カスタマイズ手順をテストします
   • 内部リンクと外部リンクをすべて確認します

4. データの検証：

   • すべてのデータポイントが正しくプロットされていることを確認します
   • 該当する場合は計算を検証します
   • チャートがデータを正確に表していることを確認します

ベストプラクティス

データの準備

1. 書式の一貫性：データ型と書式を統一します
2. 意味のあるラベル：明確で説明的なラベルを使用します
3. 適切なスケール：データを効果的に示すスケールを選択します
4. 完全なデータ：必要なフィールドがすべて揃っていることを確認します

ビジュアルデザイン

1. 色分け：直感的でアクセシビリティに配慮した配色を使用します
2. コントラスト：読みやすさに十分なコントラストを確保します
3. ラベル：さまざまなサイズでテキストが読みやすいようにします
4. 間隔：適切なパディングを設け、重なりを防ぎます
5. 一貫性：チャート全体で統一されたスタイルを使用します

ドキュメント

1. コード例：正確でテスト可能なコードスニペットを用意します
2. 変更前と変更後：カスタマイズの効果を示します
3. パラメーターの範囲：適切な値の範囲を提示します
4. よくある問題：一般的な問題と解決策を取り上げます

MkDocs との統合

1. iframe のサイズ：チャートの種類に適した高さを設定します（通常は 500～900px）
2. パスの指定：相対パス（../sims/...）を使用します
3. ナビゲーションの配置：関連する MicroSims とまとめます
4. レスポンシブな埋め込み：iframe がレスポンシブであることを確認します

チャートの種類を選ぶためのガイド

適切なチャートの種類を選べるようにします。

チャートの種類	最適な用途	適さない用途
折れ線	時系列の傾向、連続データ	カテゴリ間の比較
棒	カテゴリの比較、離散データ	傾向、連続データ
円／ドーナツ	全体に対する部分、割合（スライス数は 6 以下）	正確な比較、多数のカテゴリ
レーダー	複数の変数やプロファイルの比較	単一の変数、連続データ
極域	違いを強調した割合	正確な比較
バブル	3 つの次元（x、y、サイズ）	単純な 1 次元または 2 次元のデータ
散布図	相関、分布	カテゴリデータ

よくあるバリエーション

積み上げ棒グラフ

options: {
    scales: {
        x: { stacked: true },
        y: { stacked: true }
    }
}

横棒グラフ

{
    type: 'bar',
    options: {
        indexAxis: 'y'  // Makes bars horizontal
    }
}

複数系列の折れ線グラフ

折れ線グラフに複数のデータセットを追加します。

data: {
    datasets: [
        { label: 'Series 1', data: [...], borderColor: 'red' },
        { label: 'Series 2', data: [...], borderColor: 'blue' }
    ]
}

塗りつぶし面グラフ

{
    type: 'line',
    data: {
        datasets: [{
            fill: true,  // Fill area under line
            backgroundColor: 'rgba(75, 192, 192, 0.2)'
        }]
    }
}

トラブルシューティング

チャートが表示されない

解決策：Chart.js の CDN が正しく読み込まれていること、および canvas 要素に ID が設定されていることを確認します。

データが更新されない

解決策：データを変更した後に chart.update() が呼び出されていることを確認します。

chart.data.datasets[0].data = newData;
chart.update();

ラベルが重なっている

解決策：ラベルを回転するか、フォントサイズを小さくします。

scales: {
    x: {
        ticks: {
            maxRotation: 45,
            minRotation: 45
        }
    }
}

色が表示されない

解決策：色の形式（rgba、rgb、hex）を確認し、配列の要素数がデータの長さと一致していることを確認します。

レスポンシブ表示の問題

解決策：コンテナーの寸法を設定し、maintainAspectRatio を使用します。

options: {
    responsive: true,
    maintainAspectRatio: true,
    aspectRatio: 2
}

高度な機能

データラベルプラグイン

チャート要素に値を表示するには、Chart.js Data Labels プラグインを使用します。

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>

アニメーション

アニメーションのタイミングとイージングをカスタマイズします。

options: {
    animation: {
        duration: 2000,
        easing: 'easeInOutQuart'
    }
}

カスタムツールチップ

ツールチップの内容を完全にカスタマイズします。

plugins: {
    tooltip: {
        callbacks: {
            label: function(context) {
                return 'Custom: ' + context.parsed.y;
            }
        }
    }
}

クリックイベント

チャート要素のクリックイベントを処理します。

options: {
    onClick: (event, elements) => {
        if (elements.length > 0) {
            const dataIndex = elements[0].index;
            console.log('Clicked:', chart.data.labels[dataIndex]);
        }
    }
}

参考資料

このスキルでは、次のアセットと参考資料を使用します。

アセット

• Chart.js CDN：https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js
• オプションのデータラベルプラグイン：https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2
• ローカルアセットは不要です（Chart.js は CDN から読み込まれます）

参考資料

• Chart.js のドキュメント
• Chart.js のサンプル
• Chart.js の GitHub
• グラフの種類ガイド

実装例

さまざまな種類のグラフの実装例については、/docs/sims/ ディレクトリ内のサンプルグラフを参照してください。