Chart.js 2 での折れ線グラフの作り方＆軸設定やスタイルの変更方法 / Twin Turbo Computing

はじめに

今日は Chart.js 2 での折れ線グラフの基本的な実装方法と、軸設定やスタイルの変更方法をご紹介します。

今回使用したのは Chart.js 2.9.3 です。

目次

下準備
シンプルに折れ線グラフを描画
軸の設定とスタイル変更
おわりに

1. 下準備

今回使用した HTML と Javascript です。

app.js にグラフ描画の処理を記述しますが、そちらは後ほどご紹介します。

/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Line chart</title>
  <script>
    var plotLabels =  ['1月', '2月', '3月', '4月', '5月', '6月'];
    var plotData = {
      site1: [28, 42, 31, 56, 63, 79],
      site2: [17, 32, 35, 41, 47, 50],
    };
  </script>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"
    integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg=="
    crossorigin="anonymous"></script>
  <script src="app.js"></script>
</head>
<body>
  <canvas id="myChart" width="640" height="270"></canvas>
</body>
</html>

Chart.js の CDN は下記で確認できます。

Chart.js - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites: https://cdnjs.com/libraries/Chart.js/2.9.3
CDN (Installation · Chart.js documentation): https://www.chartjs.org/docs/latest/getting-started/installation.html#cdn

2. シンプルに折れ線グラフを描画

まずはシンプルに、最低限の実装を行ってみます。

/app.js

window.onload = function() {
  // データ
  var data = {
    labels: plotLabels,
    datasets: [
      {
        label: 'Site A',
        data: plotData.site1,
      },
      {
        label: 'Site B',
        data: plotData.site2,
      },
    ],
  };

  // グラフオプション
  var options = {
    // 自動サイズ変更をしない
    responsive: false,
  };

  // 折れ線グラフを描画
  var ctx = document.getElementById('myChart').getContext('2d');
  var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options,
  });
};

Web サイトの月間アクセス数の比較を想定しています。
実行すると下記のようなシンプルな折れ線グラフが表示されます。

3. 軸の設定とスタイル変更

基本的な実装だけでは情報が不十分で、視認性もあまり良くないので、軸ラベルの追加やグラフの色付けなどのオプションを追加します。

今回作成したコードは以下の通りです。

説明用にコメントを多めにつけています。

/app.js

window.onload = function() {
  // データ
  var data = {
    labels: plotLabels,
    datasets: [
      {
        label: 'Site A',
        data: plotData.site1,
        // 背景色
        backgroundColor: '#7fcfff',
        // 線の色
        borderColor: '#7fcfff',
        // 塗りつぶし
        fill: false,
        // 折り目をカクカクにする
        lineTension: 0,
        // マーカー背景色
        pointBackgroundColor: '#7fcfff',
        // マーカーの Hover 時のサイズ
        pointHoverRadius: 3
      },
      {
        label: 'Site B',
        data: plotData.site2,
        backgroundColor: '#ff978f',
        borderColor: '#ff978f',
        fill: false,
        lineTension: 0,
        pointBackgroundColor: '#ff978f',
        pointHoverRadius: 3
      },
    ],
  };

  // グラフオプション
  var options = {
    // 自動サイズ変更をしない
    responsive: false,
    // タイトル
    title: {
      display: true,
      fontSize: 14,
      fontStyle: 'normal', // 太字にしない
      padding: 20,
      text: '月間アクセス数'
    },
    // 凡例
    legend: {
      // 右上に配置
      align: 'start',
      position: 'right',
      // 余白
      labels: {
        padding: 15
      }
    },
    // 軸
    scales: {
      // X 軸
      xAxes: [{
        // 軸線を表示しない
        gridLines: {
          display: false,
        },
        // 目盛り
        ticks: {
          fontColor: '#333',
        },
      }],
      // Y 軸
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'アクセス数（万件）',
        },
        gridLines: {
          color: '#f3f3f3',
          zeroLineColor: '#ddd'
        },
        ticks: {
          fontColor: '#333',
          min: 0,
          max: 100,
          stepSize: 20,
        }
      }]
    }
  };

  // 折れ線グラフを描画
  var ctx = document.getElementById('myChart').getContext('2d');
  var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options,
  });
};

実行結果は下記のようになります。