あきらぼ

テック系ブログ

Chart.jsでプルダウンメニューでx軸レンジ変更

こんにちは。

今回はChart.jsのxレンジ変更をプルダウンで変更できるようにしてみました。

部屋の温湿度モニターの作成はこちら。 aki-lab.hatenadiary.com

最初に作った温湿度モニターではx軸が1週間固定となっていました。 1週間だと日ごとの変化は見やすいのですが、一日の細かい変化が見づらいのでプルダウンメニューで時間軸を選択できるようにしていきます。

ついでに温湿度を同じグラフで表示していたのを別々のグラフで表示できるようにします。

グラフの分割(html)

次にグラフを温度用と湿度用で分けます。

まずhtmlでグラフ用のcanvasを用意します。

プルダウンメニュー作成(html)

次に、プルダウンメニューを作成します。

以下の要素を追加するだけです。

プルダウンの要素のvaluejavascriptで参照することでx軸を変えていきます。 また、プルダウンを変更するときにtime_range_change()という関数を呼び出すようにしています。

見た目はこんな感じです。 f:id:AKIRA_san:20220306221053p:plain

グラフの分割(javascript

次に、javascript側を編集していきます。 まずはグラフの分割からしていきます。

コードはこんな感じ。

基本的には前回のグラフを二つに分けただけなのですが、次に定義するプルダウンメニュー変更時のコールバック関数からグラフのインスタンスを参照できるように4,6行目でグローバルでインスタンス生成しています。 それに従って、グラフオプションの設定コードがちょっと変わったのと、66、81行目で設定を反映させるためにグラフをアップデートさせています。

今回はプルダウンでx軸オプションのunitを変更するので、displayFormatsでunit毎の表示形式を設定しています。

プルダウンコールバック関数の定義(JavaScript

次にプルダウンメニュー変更時にコールされる関数を定義します。 この関数ではプルダウンで選択された値に応じてグラフのx軸を変更します。

htmlのプルダウンの選択によってx軸の表示方法(unit)と最小値を設定します。 最小値は現在時刻から設定日数(time_range_day)分差し引いた値を使用します。

あとは設定をUpdateで反映させるだけ。

これで表示レンジを選択できるようになりました。

実際の表示

一日

f:id:AKIRA_san:20220306233405p:plain

一週間

f:id:AKIRA_san:20220306233423p:plain

一カ月

f:id:AKIRA_san:20220306233439p:plain

最後に全体のコードは以下に上げています。

github.com