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: '体重' } }] } }, });

まとめ

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

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

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

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

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