見出し画像

#31 JavaScript(Chart.js)を調べてみた


こんばんは、hiroです。
ポートフォリオの作成でchart.jsを活用したグラフ実装中です。
本日学習した内容をアウトプットしたいと思います。備忘兼ねた投稿のため、詳細の記載が書けておりません。「こんな内容があるんだ〜」くらいの軽い気持ちで読んで頂けると幸いです🙇‍♂️


■実現したい事

完成イメージは添付になります。棒グラフで①〜③を実装させたいです。
https://gyazo.com/97685381652f8f07b97655d0e51e217f
①添付中段の「日」「週」「月」ボタンを押すとグラフの切り替えが出来る
②添付下段のグラフの日付を以下の様に表示したい
 日の場合:1日単位で7日間分表示したい
 週の場合:1週間単位で7週間分表示したい
 月の場合:1ヶ月単位で7ヶ月分表示したい
③同日の記録はグラフに積み上げされる様に実装したい


■調べた内容

上記URLの内容を読むことにしました。今までは検索ワードを入力していたのですが、中々ヒットしない状態が続きました。Githubの内容は英語で記載されていますが、翻訳機能を使いながら1つずつファイルを開いて実現出来そうな内容が記載されているかの確認をしました。


■学習したこと

Github内のディレクトリ構成(本記事で関与のありそうなディレクトリのみ記載)は以下の通りになります。
.github
docs


■.github

バグのレポートやドキュメンテーションの有無、機能リクエストの提案をする時に質問テンプレートを活用して活用するディレクトリっぽいです。この中で、 "SUPPORT.md" なるものがあり、こちらはchart.jsを実装するにあたり不明点があれば "Stack Over Flow" にて質問を受け付けるURLが添付されていました。 調べて力尽きた時は活用するようにします。


■docs

各グラフを実装するにあたっての共通のオプションの記述方法や、グラフ毎のオプション(グラフの目盛りや軸の詳細設定方法、グラフの色の設定方法 等)が記述されているディレクトリになります。棒グラフの内容も書かれていましたが、実装したい内容は記述されていませんでした。基本的な実装に関してはこちらを確認すれば理解出来ると思います。


結論、実装したい内容に関しては記述されておりませんでした。。。実装するのは中々大変ですね😂しかしながら、少しずつ着実に、実装したい内容には近づいてきているのも確かです。完成した時のイメージを持ちながら、ポートフォリオにこだわりを持ち、粘り強く実装していきます😇


本日も最後まで読んで頂き、ありがとうございました!🙇‍♂️


この記事が気に入ったらサポートをしてみませんか?