2023 ソフトウェア設計及び演習用の班Wiki

Chart.jsというライブラリを用いてデータをグラフ化し、タブメニューで切り替え可能にしたモジュール。

Chart.js

Chart.jsは、JavaScriptで作られたオープンソースのデータ可視化ライブラリである。Chart.jsを使用すると、ウェブページ上でさまざまな種類のグラフやチャートを簡単に作成でき、円グラフや棒グラフ、折れ線グラフ、レーダーチャートなどさまざまなデータの表現方法をサポートしている。また、グラフやチャートのカスタマイズも柔軟に行え、アニメーションや対話的な操作もサポートしている。データの視覚化を通じて情報を効果的に伝えたり、ユーザーとのインタラクションを高めるために、Chart.jsは広く使用されている。

グラフの種類

表示するデータは、「体重」「消費カロリー」「摂取カロリー」の3種類。それぞれについてを作成する。

データの取得

database.jsから、get_records関数と各種データ配列をimportする。get_records関数をimportして実行することで、日付、体重、消費カロリー、摂取カロリーのデータがそれぞれperiod、weight_Array、burned_calorie_Array、intake_calorie_Arrayに代入される。

グラフの作成

x軸は日付、y軸はそれぞれの数値として折れ線グラフを作成する。3つのグラフの相違点を多次元の連想配列を用いて表し、for文でループさせることで3つのグラフを作成した。

グラフの機能

グラフ上の点をクリックすると、その日付の詳細データに移動するようにした。HTMLのidタグを用いてJSファイルでクリックイベントを作成した。詳細データのidタグにはそのデータの日付を設定しており、クリックしたデータから得たindex情報を日付データと紐づけて"window.location.hash"でページ遷移を実現した。

タブメニューの作成

視認性の観点から3つのタブからなるタブメニューを作成し、グラフが一つずつ表示できるようにした。タブメニューはCSSのみで実装した。ラジオボタンがチェックされたときにCSSで"display: block;"とすることでそれぞれのタブの内容を表示させた。なお、1つ目のタブのラジオボタンは最初からチェックさせておくことでページ遷移したときにすでに表示されているようにした。