Chart.jsを用いてグラフを描画する方法

こんにちは。新卒2年目のy_kwmtです。今回は業務で取り扱っているChart.jsについて少し学習したので、紹介していきたいと思います。

Chart.jsとは
折れ線グラフを描画する
棒グラフを描画する
おわりに
参考にしたサイト

Chart.jsとは

グラフを簡単に描くことができるJavascriptのライブラリです。グラフはHTML5のCanvasを使って描画することができます。

描画できるグラフ一覧

折れ線グラフ
棒グラフ
レーダーチャート
円グラフ
散布図

公式サイト

www.chartjs.org

公式ドキュメント

www.chartjs.org

折れ線グラフを描画する

1/27～2/2の大阪の予想最高気温と予想最低気温をグラフにまとめてみました。以下はソースコードと実際に表示される画面です。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
　<title>グラフ</title>
</head>
<body>
  <h1>折れ線グラフ</h1>
  <canvas id="graph"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script> <!-- Chart.js読み込み -->

  <script>
  var ctx = document.getElementById("graph");
  var myLineChart = new Chart(ctx, {
    type: 'line', // 表示するグラフのタイプ
    data: {
      labels: ['1月27日', '1月28日', '1月29日', '1月30日', '1月31日', '2月1日', '2月2日'], // 横軸
      datasets: [
        {
          label: '最高気温', // 凡例
          data: [11, 17, 14, 12, 9, 10, 11],
          borderColor: "rgba(255,0,0,1)", // グラフの色
          backgroundColor: "rgba(0,0,0,0)" // 塗りつぶしなし
        },
        {
          label: '最低気温', // 凡例
          data: [9, 10, 7, 6, 4, 3, 4],
          borderColor: "rgba(0,0,255,1)", // グラフの色
          backgroundColor: "rgba(0,0,0,0)" // 塗りつぶしなし
        }
      ],
    },
    options: {
      title: {
        display: true,
        text: '気温（1月27日~2月2日）' // タイトル
      },
      elements: {
            line: {
                tension: 0, // ベジェ曲線を無効にする
            }
        },
      scales: { // 軸設定
        yAxes: [{ // y軸設定
          ticks: {
            suggestedMax: 20, // 最高値
            suggestedMin: 0, // 最低値
            stepSize: 5, // 間隔
            callback: function(value, index, values){
              return  value +  '度'
            }
          }
        }]
      },
    }
  });
  </script>
</body>

</html>

f:id:y_kwmt:20200128125156p:plain

棒グラフを描画する

架空の店の売り上げをグラフにまとめてみました。以下はソースコードと実際に表示される画面です。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
</head>
<body>
  <h1>棒グラフ</h1>
  <canvas id="graph"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script> <!-- Chart.js読み込み -->

  <script>
  var ctx = document.getElementById("graph");
  var myLineChart = new Chart(ctx, {
    type: 'bar', // 表示するグラフのタイプ
    data: {
      labels: ['1月27日', '1月28日', '1月29日', '1月30日', '1月31日', '2月1日', '2月2日'], // 横軸
      datasets: [
        {
          label: 'A店 売上高', // 凡例
          data: [200, 190, 160, 195, 215, 180, 170],
          backgroundColor: "rgba(255,255,102,1)" // グラフの塗りつぶし
        },{
          label: 'B店 売上高', // 凡例
          data: [160, 150, 130, 170, 155, 140, 170],
          backgroundColor: "rgba(102,255,204,1)" // グラフの塗りつぶし
        },{
          label: 'C店 売上高', // 凡例
          data: [120, 130, 135, 115, 150, 130, 120],
          backgroundColor: "rgba(102,204,255,1)" // グラフの塗りつぶし
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: '支店別 売上高' // タイトル
      },
      scales: { // 軸設定
        yAxes: [{  // y軸設定
          ticks: {
            suggestedMax: 240, // 最高値
            suggestedMin: 100, // 最低値
            stepSize: 30, // 間隔
            callback: function(value, index, values){
              return  value +  '万円'
            }
          }
        }]
      },
    }
  });
  </script>
</body>

</html>