Chart.jsでダイエット記録をグラフ描画してみる

Title

Chart.jsでダイエット記録をグラフ描画してみる

Date

2019-08-13

今回は、フロントエンドエンジニアらしく、体重の推移をグラフ化してみようということでまとめてみます。

完成品

以下に作成したものを UP しますので、見てみてください。

https://korsmic.github.io/JWS-Blog/chartjs/

使用ライブラリ紹介

chart.jsというものを利用して実装を行います。

DL は以下の GitHub よりできます。

https://www.chartjs.org/

document はこちら

まずはデータを用意

  • エクセルなどでデータをまとめます。
  • まとめたデータを配列に変換します。

これでとりあえず準備は OK です。

HTML 実装例

  • chart.jsを読み込みます。
  • canvas 要素を作ります。(id を myChart としています。)
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Chart.jsでダイエット記録をグラフ描画してみる</title>
  </head>
  <body>
    <canvas id="myChart"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <script>
      // ここにJSを書いていきます。
    </script>
  </body>
</html>

JS の実装

細かくデザインの設定も可能ですが、今回はシンプルにまとめていきます。

最初に用意したデータを入れ込んでいきます。

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: {
    // 横軸を指定
    labels: [
      '05月20日',
      '05月21日',
      '05月22日',
      '05月23日',
      '05月24日',
      '05月25日',
      '05月26日',
      '05月27日',
      '05月28日',
      '05月29日',
      '05月30日',
      '05月31日',
      '06月01日',
      '06月02日',
      '06月03日',
      '06月04日',
      '06月05日',
      '06月06日',
      '06月07日',
      '06月08日',
      '06月09日',
      '06月10日',
      '06月11日',
      '06月12日',
      '06月13日',
      '06月14日',
      '06月15日',
      '06月16日',
      '06月17日',
      '06月18日',
      '06月19日',
      '06月20日',
      '06月21日',
      '06月22日',
      '06月23日',
      '06月24日',
      '06月25日',
      '06月26日',
      '06月27日',
      '06月28日',
      '06月29日',
      '06月30日',
      '07月01日',
      '07月02日',
      '07月03日',
      '07月04日',
      '07月05日',
      '07月06日',
      '07月07日',
      '07月08日',
      '07月09日',
      '07月10日'
    ],
    datasets: [
      {
        // 上部のタイトル指定
        label: 'ダイエット記録',
        lineTension: 0.1,
        // 色周りの指定
        backgroundColor: 'rgba(75,192,192,0.4)',
        borderColor: 'rgba(75,192,192,1)',
        // 縦軸データを指定
        data: [
          88.6, 87.2, 86.5, 86.9, 84.0, 86.6, 86.1, 85.5, 84.5, 84.5, 84.6,
          83.9, 84.0, 85.3, 85.6, 84.9, 84.6, 84.0, 83.9, 84.7, 83.4, 83.3,
          83.1, 83.1, 83.2, 82.9, 83.0, 82.5, 82.1, 82.7, 83.1, 82.1, 82.5,
          82.6, 83.9, 85.3, 83.9, 83.9, 82.8, 82.8, 82.2, 81.8, 80.9, 80.7,
          80.2, 80.0, 81.8, 82.9, 82.2, 81.5, 80.9, 80.3
        ]
      }
    ]
  },
  options: {
    scales: {
      yAxes: [
        {
          ticks: {
            // ここで最小値を指定することができる。指定しないとdataの最小値が最小値になる。
            min: 75.0,
            // ここで縦軸に単位を加えることができる。
            userCallback: function (tick) {
              return tick.toString() + 'kg';
            }
          },
          // 縦軸のラベル指定
          scaleLabel: {
            display: true,
            labelString: '体重'
          }
        }
      ]
    }
  }
});

まとめ

いかがでしたでしょうか。 ちょっと手間がかかりますが、きれいなグラフが描画できたと思います。

今回は「折れ線グラフ」を使いましたが、ほかにも「棒グラフ・パイチャート・バブルチャート・レーダーチャート」などいろんなグラフを描画できるプラグインになっています。

無料で利用できますので、グラフ利用の際は使ってみてはいかがでしょうか。

制作パートナー(外注)をお探しの制作会社様・広告代理店様

お気軽にお問い合わせください。