ライブラリ【Chart.js】でシンプルなグラフの描画とカスタマイズをやってみる

JavaScript2018.5.26

最終更新日：2018.5.27 Update!!

分析システムのダッシュボードや、データを扱ったコンテンツがあるウェブサイトなどではグラフの描画されている場面もよく見かけます。今回はそんなグラフの描画を簡単にできるjavascriptのライブラリである「Chart.js」を使って、グラフの作成とカスタマイズをやってみたいと思います。

グラフ描画にChart.jsを導入する

Chart.jsはJavaScriptでグラフの設定を行い、その内容でcanvas要素としてHTML上に描画されます。といっても、実装はシンプルでグラフが描画されるcanvas要素と、グラフを設定するjavascriptを記述するだけでOKです。まずは導入するための準備が必要となりますが、以下のようにChart.jsのライブラリの読み込みと、グラフ描画のcanvas要素、グラフ設定のscriptを用意します。【HTML】※一部省略

// ファイルを直接読み込む
<script src='./PATH/Chart.min.js'></script>
// CDNとして読み込む
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>

// グラフ描画の要素とグラフ設定のスクリプト
<canvas id="myChart"></canvas>
<script>
  var ctx = document.getElementById("myChart").getContext('2d');
  var myBarChart_02 = new Chart(ctx, {
    type: 'グラフのタイプ',
    data: {
      [グラフデータ]
    },
    options: {
      [表示オプション]
    }
  });
</script>

ファイルは公式サイトからダウンロードするか、CDNとして読み込みます。そして、グラフ描画の要素にはidを指定し、そのidをグラフデータと紐付けします。

Chart.jsで簡単にグラフを描画する

以下はデフォルトの状態で、基本的なグラフ描画の一例です。これだけである程度見栄えのいいグラフが作成できます。【javascript】

<script>
  var ctx = document.getElementById("myChart").getContext('2d');
  var myBarChart_01 = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["A", "B", "C", "D", "E"],
      datasets: [{
        label: 'データサンプル',
        data: [60, 40, 10, 90, 50, 30],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero:true
          }
        }]
      }
    }
  });
</script>

ここではtypeの値にbarを設定することで「棒グラフ」を採用しています。datasets => dataにある配列でそれぞれのグラフで示す数値を入れています。サンプルはこちらに用意していますので参考に。また、グラフの種類は棒グラフの他にも以下のタイプが用意されています。 ・線グラフ ・面グラフ ・レーダーチャート ・バブルチャート ・円グラフ ・ドーナツグラフ ・鶏頭図 グラフの形状が選択できるので、いろんなデータにも対応することが可能ですね。詳しくは公式のドキュメント（日本語）を参考にしてください。

グラフを見やすくカスタマイズする

デフォルトでも洗練されたグラフが描画されますが、Chart.jsではいろんなカスタマイズが可能で、より見やすくすることができます。また、複数のグラフを合わせて表示させることもできますので、複雑なデータをグラフで表現するときに便利です。以下はカスタマイズした時のサンプルです。【javascript】

<script>
  var ctx = document.getElementById("myChart").getContext('2d');
  var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["A", "B", "C", "D", "E"],
      datasets: [{
        label: 'データサンプル',
        data: [60, 40, 10, 90, 50, 30],
        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: 3,
        hoverBackgroundColor: [
          'rgba(255, 99, 132, 0.7)',
          'rgba(54, 162, 235, 0.7)',
          'rgba(255, 206, 86, 0.7)',
          'rgba(75, 192, 192, 0.7)',
          'rgba(153, 102, 255, 0.7)'
        ]
      },{
        data: [85, 60, 30, 95, 55, 45],
        type: 'line',
        fill: false,
        lineTension: 0,
        pointBackgroundColor: '#999',
        pointBorderColor: '#fff',
        pointBorderWidth: 3,
        pointRadius: 10,
        borderColor: '#999',
        borderWidth: 3,
        pointHoverBackgroundColor: [
          '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)'
        ],
        pointHoverBorderColor: '#fff',
        pointHoverRadius: 10
      }]
    },
    options: {
      legend: {
        display: false
      },
      hover: {
        animationDuration: 1000
      },
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero:true,
            fontColor: '#900',
            fontSize: 18,
            fontWeight: 'bold',
            max: 100
          },
          gridLines: {
            color: '#ddd',
            borderDash: [5,5],
            lineWidth: 1,
            zeroLineWidth: 2,
            zeroLineColor: '#444',
            drawTicks: false
          }
        }],
        xAxes: [{
          ticks: {
            fontColor: '#000',
            fontSize: 18,
            fontWeight: 'bold'
          },
          gridLines: {
            display: false
          }
        }],
      }
    }
  });
</script>

かなり複雑ですが、こちらのサンプルを見てもらうとわかりやすいかと思います。ここではいろんな設定をしていますが、datasetsを続けて書くことで複数のデータを扱いグラフを作成しています。また、デフォルトのラベルや目盛り線なども調整してグラフを見やすくしています。グラフの色は各データに合わせて色を変更することも可能です。

いかがでしょうか、今回はサンプルとしてハードコーディングで書いていますが、実際の使用ケースとしては、データベースの値を取り出してグラフに描画するなどがあるのではないでしょうか。グラフ描画のライブラリは様々なものがありますが、Chart.jsはシンプルかつビジュアルも綺麗で、いろんなオプションも揃っているので、初めてグラフを作成する場合にはオススメです！今回のグラフはこちらにサンプルとして用意しています。（参考にさせて頂いたサイト） Chart.js 日本語ドキュメント