【フロントエンド入門19】グラフやチャートの描画｜Chart.jsなどでデータを視覚化する方法

データを効果的に伝えるためには、視覚的な表現が欠かせません。グラフやチャートを使うことで、複雑なデータも直感的に理解できるようになります。本記事では、JavaScriptのライブラリであるChart.jsを使って、簡単にグラフを描画する方法を初心者向けに詳しく解説します。

グラフやチャートの重要性
1. データ視覚化のメリット
Chart.jsの概要
1. Chart.jsとは？
2. インストール方法
基本的な棒グラフの描画
折れ線グラフの描画
1. コード例
2. 解説
円グラフの描画
1. コード例
2. 解説
インタラクティブなグラフの作成
1. ツールチップのカスタマイズ
結論

グラフやチャートの重要性

データ視覚化のメリット

データの理解が深まる：テーブル形式よりも、視覚的にデータを把握しやすくなります。
パターンや傾向が見える：データの増減や変化をすぐに発見できます。
プレゼンテーションに最適：視覚的な表現は、他人にデータを説明する際にも有効です。

Chart.jsの概要

Chart.jsとは？

Chart.jsは、シンプルで柔軟なグラフ作成用のオープンソースライブラリです。以下の特徴があります：

軽量で簡単：設定がシンプルで、初心者でもすぐに使えます。
多種多様なグラフ：棒グラフ、折れ線グラフ、円グラフなど、さまざまな種類のグラフに対応しています。
レスポンシブ対応：画面サイズに応じてグラフが自動的に調整されます。

インストール方法

Chart.jsは、CDNまたはnpmを使ってインストールできます。

CDNを使う方法

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

npmを使う方法

npm install chart.js

基本的な棒グラフの描画

1. HTMLの準備

まず、グラフを描画するためのキャンバス要素をHTMLに追加します。

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

2. JavaScriptのコード

次に、Chart.jsを使って基本的な棒グラフを描画します。

<script>
  const ctx = document.getElementById('myChart').getContext('2d');
  const myChart = new Chart(ctx, {
    type: 'bar', // グラフの種類
    data: {
      labels: ['January', 'February', 'March', 'April', 'May', 'June'], // X軸のラベル
      datasets: [{
        label: '売上',
        data: [12, 19, 3, 5, 2, 3], // 棒グラフのデータ
        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)',
          'rgba(255, 159, 64, 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)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

解説

type: 'bar'：棒グラフを指定します。
data.labels：X軸の各データ点に対応するラベルです。
datasets：データセットを定義し、色や幅などを指定します。
options.scales.y.beginAtZero：Y軸の開始位置を0に設定します。

折れ線グラフの描画

次に、売上の推移を表す折れ線グラフを描画してみましょう。

コード例

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

<script>
  const ctxLine = document.getElementById('lineChart').getContext('2d');
  const lineChart = new Chart(ctxLine, {
    type: 'line',
    data: {
      labels: ['January', 'February', 'March', 'April', 'May', 'June'],
      datasets: [{
        label: '売上',
        data: [10, 15, 5, 12, 20, 25],
        fill: false,
        borderColor: 'rgba(75, 192, 192, 1)',
        tension: 0.1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

解説

type: 'line'：折れ線グラフを指定します。
fill: false：線の下に色を塗らない設定です。
tension: 0.1：線の曲がり具合を制御します。

円グラフの描画

円グラフは、カテゴリごとの割合を表現するのに適しています。

コード例

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

<script>
  const ctxPie = document.getElementById('pieChart').getContext('2d');
  const pieChart = new Chart(ctxPie, {
    type: 'pie',
    data: {
      labels: ['Red', 'Blue', 'Yellow'],
      datasets: [{
        data: [30, 50, 20],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)'
        ],
        borderWidth: 1
      }]
    }
  });
</script>

解説

type: 'pie'：円グラフを指定します。
data：各カテゴリのデータと色を指定します。

インタラクティブなグラフの作成

Chart.jsは、ツールチップや凡例などのインタラクティブな要素もサポートしています。

ツールチップのカスタマイズ

options: {
  plugins: {
    tooltip: {
      callbacks: {
        label: function(context) {
          return context.label + ': ' + context.raw + ' 件';
        }
      }
    }
  }
}

この設定を追加することで、データポイントにマウスオーバーしたときにカスタムメッセージを表示できます。