4-1. グラフ描画（Chart.js）

更新日：2025年12月7日

4-1. グラフ描画（Chart.js）について解説します。

※画像は生成AIによるイメージです。

Chart.jsは、美しくインタラクティブなグラフを簡単に作成できるJavaScriptライブラリです。わずか数行のコードで、様々な種類のグラフを描画できます。

Chart.jsの特徴

レスポンシブ対応：自動的に画面サイズに合わせて調整
8種類のグラフ：棒グラフ、折れ線グラフ、円グラフなど
アニメーション：描画時の滑らかなアニメーション
カスタマイズ性：色、フォント、凡例など細かく設定可能

基本的な使い方

1. ライブラリの読み込み

<!-- CDNから読み込む場合 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

2. HTMLでキャンバスを準備

<canvas id="myChart" width="400" height="200"></canvas>

3. JavaScriptでグラフを描画

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',  // グラフの種類
    data: {
        labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
        datasets: [{
            label: '売上（万円）',
            data: [120, 190, 150, 250, 220, 300],
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

グラフの種類

type値	グラフ名	用途
bar	棒グラフ	カテゴリ別の比較
line	折れ線グラフ	時系列データの推移
pie	円グラフ	割合の表示
doughnut	ドーナツグラフ	円グラフの変形版
radar	レーダーチャート	多項目の評価

実用的な例：売上推移グラフ

// 複数データセットの折れ線グラフ
const salesChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['4月', '5月', '6月', '7月', '8月', '9月'],
        datasets: [{
            label: '今年',
            data: [650, 590, 800, 810, 560, 550],
            borderColor: 'rgb(255, 99, 132)',
            tension: 0.1
        }, {
            label: '昨年',
            data: [480, 480, 520, 540, 490, 620],
            borderColor: 'rgb(54, 162, 235)',
            tension: 0.1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: '売上推移の比較'
            }
        }
    }
});

PHPとの連携

PHPでデータベースから取得したデータをJSON形式で出力し、 JavaScriptで受け取ってグラフ化することができます。

// PHP側（data.php）
<?php
$data = [
    'labels' => ['商品A', '商品B', '商品C'],
    'values' => [300, 450, 200]
];
echo json_encode($data);
?>

// JavaScript側
fetch('data.php')
    .then(response => response.json())
    .then(data => {
        // データを使ってグラフを描画
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: data.labels,
                datasets: [{
                    label: '売上数',
                    data: data.values
                }]
            }
        });
    });

まとめ

Chart.jsを使うことで、データの可視化が簡単に実現できます。 PHPと組み合わせることで、動的なデータをリアルタイムにグラフ化することも可能です。次のページでは、地図表示ライブラリについて学習します。

免責事項
本コンテンツは2025年12月時点の情報に基づいて作成されている。最新の情報については公式ドキュメントを参照されたい。