chart.js | グラフを描く方法の基本と応用 | 複数の実例で理解するJavaScriptライブラリ解説

ライブラリ

2024.10.062024.10.09

INDEX

chart.jsについての解説

chart.jsについての解説

chart.jsは、JavaScriptを使用してデータの視覚化を行うための軽量で強力なライブラリです。複数のグラフ形式をサポートしており、Webアプリケーションでのデータ表示に広く利用されています。

chart.jsを用いた参考アプリ

グラフ作成アプリです。ダウンロードをして保存をすることもできます。

グラフ作成＆PNG形式で画像保存対応｜簡単データ可視化の５種対応のグラフジェネレーター

グラフジェネレーターデータを「70(りんご), 60(ぶどう), 90(いちご)」のようにカンマ区切りで数値とラベルを入力してください。棒グラフを作成折れ線グラフを作成円グラフを作成散布図を作成レーダーチャートを作成数値を表示するグラフをPNGとしてダウンロードグラフジェネレーターについて入力されたデータ...

chart.jsの実装方法

chart.jsを使用するためには、以下のコードを<head>内に記述してライブラリを読み込みます。

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

chart.jsの特徴

特徴	説明
多様なグラフ形式	棒グラフ、円グラフ、線グラフ、レーダーチャートなどをサポートし、多様なデータの視覚化が可能です。
レスポンシブ対応	デフォルトでレスポンシブ対応しており、スマートフォンやタブレットでも美しいグラフが表示されます。
高いカスタマイズ性	色やサイズ、アニメーションなど、グラフの見た目を柔軟にカスタマイズ可能です。
シンプルな構文	初心者にも理解しやすいシンプルな構文で、直感的に使用できます。

プロパティとその値の一覧表

プロパティ名	説明	値の例
type	グラフの種類を指定します。	‘bar’, ‘line’, ‘pie’, ‘radar’など
data	グラフに表示するデータを定義します。	labels, datasets などを含むオブジェクト
labels	グラフに表示するラベルの配列	[‘January’, ‘February’, ‘March’]など
datasets	データセットの定義	ラベル、データ、背景色、枠線色など
backgroundColor	データポイントの背景色を指定します。	‘rgba(255, 99, 132, 0.2)’など
borderColor	データポイントの枠線色を指定します。	‘rgba(255, 99, 132, 1)’など
options	グラフ全体のオプション設定を行います。	scales, tooltips, legend など

棒グラフを作成する例

実行例

HTMLとJavaScriptコード


// Canvas要素をHTMLに記述
<canvas id="myBarChart" width="400" height="400"></canvas>

// 棒グラフのJavaScriptコード
<script>
var ctxBar = document.getElementById('myBarChart').getContext('2d'); // Canvasのコンテキストを取得
var myBarChart = new Chart(ctxBar, {
    type: 'bar', // グラフの種類を指定
    data: {
        labels: ['January', 'February', 'March', 'April', 'May'], // X軸に表示するラベル
        datasets: [{
            label: 'Monthly Sales', // 凡例として表示されるテキスト
            data: [30, 50, 40, 60, 70], // Y軸に表示されるデータ
            backgroundColor: [ // 各データの背景色
                'rgba(255, 99, 132, 0.2)', 
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)'
            ],
            borderColor: [ // 各データの枠線色
                'rgba(255, 99, 132, 1)', 
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)'
            ],
            borderWidth: 1 // 枠線の太さ
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true // Y軸を0から開始
            }
        }
    }
});
</script>

解説

この棒グラフの例では、chart.jsを使って月ごとの売上を表示しています。各データポイントには背景色と枠線の色が設定され、視覚的にデータを区別しています。

円グラフを作成する例

実行例

HTMLとJavaScriptコード


// Canvas要素をHTMLに記述
<canvas id="myPieChart" width="400" height="400"></canvas>

// 円グラフのJavaScriptコード
<script>
var ctxPie = document.getElementById('myPieChart').getContext('2d'); // Canvasのコンテキストを取得
var myPieChart = new Chart(ctxPie, {
    type: 'pie', // グラフの種類を指定
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'], // 円グラフのセグメントラベル
        datasets: [{
            data: [12, 19, 3, 5, 2], // 各セグメントのデータ
            backgroundColor: [ // 各セグメントの背景色
                'rgba(255, 99, 132, 0.2)', 
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)'
            ],
            borderColor: [ // 各セグメントの枠線色
                'rgba(255, 99, 132, 1)', 
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)'
            ],
            borderWidth: 1 // 枠線の太さ
        }]
    }
});
</script>

解説

この円グラフの例では、5つのデータセグメントをそれぞれ異なる色で表現し、視覚的に簡単に区別できるようにしています。

線グラフを作成する例

実行例

HTMLとJavaScriptコード


// Canvas要素をHTMLに記述
<canvas id="myLineChart" width="400" height="400"></canvas>

// 線グラフのJavaScriptコード
<script>
var ctxLine = document.getElementById('myLineChart').getContext('2d'); // Canvasのコンテキストを取得
var myLineChart = new Chart(ctxLine, {
    type: 'line', // グラフの種類を指定
    data: {
        labels: ['January', 'February', 'March', 'April', 'May'], // X軸に表示するラベル
        datasets: [{
            label: 'Monthly Visitors', // 凡例として表示されるテキスト
            data: [300, 500, 400, 600, 700], // Y軸に表示されるデータ
            backgroundColor: 'rgba(54, 162, 235, 0.2)', // データの背景色
            borderColor: 'rgba(54, 162, 235, 1)', // データの枠線色
            borderWidth: 2 // 枠線の太さ
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true // Y軸を0から開始
            }
        }
    }
});
</script>

解説

この線グラフでは、訪問者数の変動を時系列で表示しています。背景色と枠線を設定することで、グラフの視認性を向上させています。

レーダーチャートを作成する例

実行例

HTMLとJavaScriptコード


// Canvas要素をHTMLに記述
<canvas id="myRadarChart" width="400" height="400"></canvas>

// レーダーチャートのJavaScriptコード
<script>
var ctxRadar = document.getElementById('myRadarChart').getContext('2d'); // Canvasのコンテキストを取得
var myRadarChart = new Chart(ctxRadar, {
    type: 'radar', // グラフの種類を指定
    data: {
        labels: ['Speed', 'Strength', 'Stamina', 'Skill', 'Agility'], // 各軸に表示されるラベル
        datasets: [{
            label: 'Athlete A', // 凡例として表示されるテキスト
            data: [80, 90, 70, 85, 75], // 各軸に対応するデータ
            backgroundColor: 'rgba(255, 99, 132, 0.2)', // データの背景色
            borderColor: 'rgba(255, 99, 132, 1)', // データの枠線色
            borderWidth: 2 // 枠線の太さ
        }]
    },
    options: {
        scales: {
            r: {
                beginAtZero: true // 各軸を0から開始
            }
        }
    }
});
</script>