NEW ARTICLE
gulp+webpack+jQuery+pug+sassで開発環境構築
  • Chart.jsでダイエット記録をグラフ描画してみる

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

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

こんにちは！

今回は、先日「フリーランスは健康管理も仕事！- ダイエット編」の記事を書いたついでに、フロントエンドエンジニアらしく、体重の推移をグラフ化してみようということでまとめてみます。

目次

完成品

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

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

使用ライブラリ紹介

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

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

https://www.chartjs.org/

documentはこちら

まずはデータを用意

https://blog-jws.com/wp-content/uploads/2019/08/ダイエット記録.jpg

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

これでとりあえず準備は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: '体重'
          }
      }]
    }
  },
});

まとめ

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

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

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

･･･引き続きダイエット頑張ります。。。

ポートフォリオ・お問合せはこちら

ポートフォリオサイト
お問合せはこちら