読み込み中...

JavaScriptで動的グラフを作成する方法10選！

JavaScriptで動的グラフを作成する方法を学ぶ初心者 JS
2023.04.25
この記事は約23分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptを使って動的グラフを作成する方法が身につくこと間違いなし！

初心者でも簡単に動的グラフを作成できる方法を徹底解説します。

さらに、手順や注意点、サンプルコードを10選ご紹介します。

●動的グラフとは

動的グラフとは、データの変化に応じてグラフが自動的に更新されるようなグラフのことです。

JavaScriptを使って動的グラフを作成することで、リアルタイムでデータを視覚化し、ユーザーが理解しやすくすることができます。

○動的グラフの特徴

  1. データの変化に応じてグラフが自動的に更新される
  2. リアルタイムでデータを視覚化できる
  3. インタラクティブな操作が可能

●JavaScriptでの動的グラフ作成

JavaScriptを用いて動的グラフを作成する際には、専用のライブラリを利用することが一般的です。

これにより、短いコードで効率的にグラフを描画できます。

○ライブラリの選択

主なグラフ作成ライブラリには、Chart.js、Google Charts、Highchartsなどがあります。

それぞれ特徴や利点が異なるため、用途に応じて選ぶことが大切です。

この記事では、シンプルで使いやすいChart.jsを使用して動的グラフの作成方法を解説します。

●サンプルコード1〜5

○サンプルコード1: グラフ作成の基本

まずはChart.jsを使ったグラフ作成の基本を押さえましょう。

下記のコードは、HTMLでcanvas要素を作成し、JavaScriptでグラフを描画する基本的な形です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>グラフ作成の基本</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart"></canvas>
  <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'bar', // グラフの種類を指定
      data: {
        labels: ['赤', '青', '黄', '緑', '紫'],
        datasets: [{
          label: '色の出現回数',
          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
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
</html>

このコードでは、typeプロパティでグラフの種類を指定し、dataプロパティでグラフのデータを設定しています。

optionsプロパティでグラフのオプションを指定できます。

○サンプルコード2: 折れ線グラフ

折れ線グラフは、連続したデータの変化を表すのに適したグラフです。

下記のコードは、Chart.jsを使って折れ線グラフを描画する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>折れ線グラフ</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="lineChart"></canvas>
  <script>
    const ctx = document.getElementById('lineChart').getContext('2d');
    const myLineChart = new Chart(ctx, {
      type: 'line', // グラフの種類を指定
      data: {
        labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
        datasets: [{
          label: '月別売上',
          data: [100, 200, 150, 300, 250, 350],
          borderColor: 'rgba(75, 192, 192, 1)',
          tension: 0.1 // 折れ線のカーブ率を指定
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
</html>

このコードでは、typeプロパティにlineを指定することで折れ線グラフを作成しています。

また、tensionプロパティで折れ線のカーブ率を調整できます。

○サンプルコード3: 棒グラフ

棒グラフは、カテゴリ別の数値を比較するのに適したグラフです。

下記のコードは、Chart.jsを使って棒グラフを描画する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>棒グラフのサンプル</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="barChart"></canvas>
  <script>
    // キャンバスの要素を取得
    const ctx = document.getElementById('barChart').getContext('2d');

    // 棒グラフを作成
    const myBarChart = new Chart(ctx, {
      type: 'bar', // グラフの種類を指定
      data: {
        labels: ['赤', '青', '黄', '緑', '紫'], // カテゴリ名を設定
        datasets: [{
          label: '色の出現回数', // データセットのラベルを設定
          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 // 枠線の太さを設定
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true // Y軸の最小値を0に設定
          }
        }
      }
    });
  </script>
</body>
</html>

このコードでは、typeプロパティにbarを指定して棒グラフを作成しています。

また、backgroundColorとborderColorプロパティで各棒の色をカスタマイズしています。

○サンプルコード4: 円グラフ

円グラフは、全体に対する各部分の割合を示すのに適したグラフです。

下記のコードは、Chart.jsを使って円グラフを描画する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>円グラフのサンプル</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="pieChart"></canvas>
  <script>
    // キャンバスの要素を取得
    const ctx = document.getElementById('pieChart').getContext('2d');

    // 円グラフを作成
    const myPieChart = new Chart(ctx, {
      type: 'pie', // グラフの種類を指定
      data: {
        labels: ['赤', '青', '黄', '緑', '紫'], // カテゴリ名を設定
        datasets: [{
          data: [12, 19, 3, 5, 2], // データを設定
          backgroundColor: [ // 各セグメントの背景色を設定
            'rgba(255, 99, 132, 0.8)',
            'rgba(54, 162, 235, 0.8)',
            'rgba(255, 206, 86, 0.8)',
            'rgba(75, 192, 192, 0.8)',
            'rgba(153, 102, 255, 0.8)'
          ]
        }]
      }
    });
  </script>
</body>
</html>

このコードでは、typeプロパティにpieを指定して円グラフを作成しています。

また、backgroundColorプロパティで各セグメントの色をカスタマイズしています。

○サンプルコード5: レーダーチャート

レーダーチャートは、複数の要素を比較するために使用されるグラフです。

下記のコードは、Chart.jsを使ってレーダーチャートを描画する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>レーダーチャートのサンプル</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="radarChart"></canvas>
  <script>
    // キャンバスの要素を取得
    const ctx = document.getElementById('radarChart').getContext('2d');

    // レーダーチャートを作成
    const myRadarChart = new Chart(ctx, {
      type: 'radar', // グラフの種類を指定
      data: {
        labels: ['速度', '耐久性', '柔軟性', '効果', 'デザイン'], // 各項目の名前を設定
        datasets: [{
          label: '製品A', // 製品名を設定
          data: [80, 90, 70, 85, 60], // 製品Aのデータを設定
          borderColor: 'rgba(255, 99, 132, 0.8)', // 枠線の色を設定
          backgroundColor: 'rgba(255, 99, 132, 0.3)', // 塗りつぶしの色を設定
          borderWidth: 1 // 枠線の太さを設定
        }, {
          label: '製品B', // 製品名を設定
          data: [60, 80, 95, 70, 85], // 製品Bのデータを設定
          borderColor: 'rgba(54, 162, 235, 0.8)', // 枠線の色を設定
          backgroundColor: 'rgba(54, 162, 235, 0.3)', // 塗りつぶしの色を設定
          borderWidth: 1 // 枠線の太さを設定
        }]
      }
    });
  </script>
</body>
</html>

このコードでは、typeプロパティにradarを指定してレーダーチャートを作成しています。

labelで各製品名を指定し、dataで各製品のデータを設定しています。

また、borderColorとbackgroundColorで、枠線の色と塗りつぶしの色をカスタマイズしています。

●サンプルコード6〜10

○サンプルコード6: グラフのアニメーション

Chart.jsを使用すると、グラフのアニメーションも簡単に実装できます。

下記のコードは、グラフのアニメーションをカスタマイズする例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>グラフのアニメーションサンプル</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="animationChart"></canvas>
  <script>
    // キャンバスの要素を取得
    const ctx = document.getElementById('animationChart').getContext('2d');

    // グラフを作成
    const myAnimationChart = new Chart(ctx, {
      type: 'bar', // グラフの種類を指定
      data: {
        // 省略: データの設定
      },
      options: {
        animation: {
          duration: 2000, // アニメーションの持続時間を指定 (単位: ミリ秒)
          easing: 'easeInOutBounce' // アニメーションのイージングを指定
        }
      }
    });
  </script>
</body>
</html>

optionsオブジェクト内にanimationプロパティを追加し、durationでアニメーションの持続時間を指定し、easingでアニメーションのイージングを指定しています。

○サンプルコード7: グラフのカスタマイズ

Chart.jsでは、グラフの見た目や動作をカスタマイズできます。

下記のコードは、軸や凡例などをカスタマイズする例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>グラフのカスタマイズサンプル</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="customChart"></canvas>
  <script>
    // キャンバスの要素を取得
    const ctx = document.getElementById('customChart').getContext('2d');

    // グラフを作成
    const myCustomChart = new Chart(ctx, {
      type: 'line', // グラフの種類を指定
      data: {
        // 省略: データの設定
      },
      options: {
        scales: {
          x: {
            display: true, // X軸の表示・非表示を設定
            title: {
              display: true, // X軸のタイトルの表示・非表示を設定
              text: '月' // X軸のタイトルを設定
            }
          },
          y: {
            display: true, // Y軸の表示・非表示を設定
            title: {
              display: true, // Y軸のタイトルの表示・非表示を設定
              text: '売上（千円）' // Y軸のタイトルを設定
            },
            ticks: {
              stepSize: 50, // Y軸の目盛りの間隔を設定
              callback: function(value) {
                return value + 'k'; // Y軸の目盛りに単位を追加
              }
            }
          }
        },
        plugins: {
          legend: {
            display: true, // 凡例の表示・非表示を設定
            position: 'bottom' // 凡例の位置を設定
          }
        }
      }
    });
  </script>
</body>
</html>

この例では、optionsオブジェクト内のscalesプロパティとpluginsプロパティを使って、軸や凡例をカスタマイズしています。

軸のタイトルや目盛りの間隔、凡例の位置などを設定しています。

○サンプルコード8: グラフの更新

グラフのデータを動的に更新することができます。

下記のコードは、ボタンを押すとグラフのデータが更新される例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>グラフの更新サンプル</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="updateChart"></canvas>
  <button id="updateButton">データ更新</button>
  <script>
    // キャンバスの要素を取得
    const ctx = document.getElementById('updateChart').getContext('2d');

    // グラフを作成
    const myUpdateChart = new Chart(ctx, {
      type: 'line', // グラフの種類を指定
      data: {
        // 省略: データの設定
      },
      options: {
        // 省略: オプションの設定
      }
    });

    // ボタンの要素を取得
    const updateButton = document.getElementById('updateButton');

    // ボタンがクリックされたときの処理を設定
    updateButton.addEventListener('click', () => {
      // 新しいデータを作成
      const newData = {
        // 新しいデータの設定
      };

      // グラフのデータを更新
      myUpdateChart.data = newData;

      // グラフを再描画
      myUpdateChart.update();
    });
  </script>
</body>
</html>

この例では、ボタンの要素を取得し、クリックされたときにグラフのデータを更新するイベントリスナーを設定しています。

新しいデータを作成し、グラフのデータに設定した後、update()メソッドを呼び出してグラフを再描画しています。

○サンプルコード9: 複数のグラフ表示

複数のグラフを同じページに表示することもできます。

下記のコードは、2つのグラフを表示する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>複数のグラフ表示サンプル</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="firstChart"></canvas>
  <canvas id="secondChart"></canvas>
  <script>
    // 第一のグラフのキャンバス要素を取得
    const firstCtx = document.getElementById('firstChart').getContext('2d');

    // 第一のグラフを作成
    const myFirstChart = new Chart(firstCtx, {
      type: 'bar', // グラフの種類を指定
      data: {
        // 省略: データの設定
      },
      options: {
        // 省略: オプションの設定
      }
    });

    // 第二のグラフのキャンバス要素を取得
    const secondCtx = document.getElementById('secondChart').getContext('2d');

    // 第二のグラフを作成
    const mySecondChart = new Chart(secondCtx, {
      type: 'line', // グラフの種類を指定
      data: {
        // 省略: データの設定
      },
      options: {
        // 省略: オプションの設定
      }
    });
  </script>
</body>
</html>

この例では、2つのキャンバス要素を取得し、それぞれにグラフを作成しています。

グラフの種類やデータ、オプションは別々に設定できるため、異なる種類のグラフを表示したり、異なるデータセットを使用したりすることができます。

○サンプルコード10: グラフのインタラクティブ機能

Chart.jsのグラフは、インタラクティブな機能を持っています。

下記のコードは、グラフのデータポイントにカーソルを合わせると、ツールチップが表示される例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>グラフのインタラクティブ機能サンプル</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="interactiveChart"></canvas>
  <script>
    // キャンバスの要素を取得
    const ctx = document.getElementById('interactiveChart').getContext('2d');

    // グラフを作成
    const myInteractiveChart = new Chart(ctx, {
      type: 'bar', // グラフの種類を指定
      data: {
        // 省略: データの設定
      },
      options: {
        // 省略: オプションの設定
        plugins: {
          tooltip: {
            enabled: true // ツールチップを有効にする
          }
        }
      }
    });
  </script>
</body>
</html>

この例では、optionsオブジェクト内にあるpluginsオブジェクトのtooltipプロパティを使って、ツールチップを有効にしています。

この設定により、データポイントにカーソルを合わせると、そのデータの詳細情報が表示されるツールチップが現れます。

●注意点と対処法

  • グラフの表示が遅い場合や、ページが重い場合は、グラフの描画やアニメーションを最適化することで改善できることがあります。
  • 一部のブラウザでは、グラフが正しく表示されない場合があります。
    対応するブラウザを確認し、必要に応じてpolyfillを導入してください。
  • グラフのデザインや機能が十分でない場合は、Chart.jsのプラグインを使用することで、独自の機能やデザインを追加できます。

まとめ

この記事では、Chart.jsを使ってグラフを作成する方法や、カスタマイズやインタラクティブ機能を追加する方法を紹介しました。

Chart.jsは、簡単に美しいグラフを作成できるため、Webページにグラフを表示したい場合にはぜひ利用してみてください。