ソーラー発電&Arduino測定の気象データをChart.jsでグラフ化⑤表示調整

アバター画像 お母ちゃん  2022.1.8 
Home > Web > ソーラー発電&Arduino測定の気象データをChart.jsでグラフ化⑤表示調整
すき 0
うんこ 0

前回

RaspberryPi サーバ & WordPress ブログ を XSERVER に サーバ移転

今回はちょこちょことお父ちゃんから依頼のあった表示の調整を行いました。

ソースコード

①フォントサイズ

<ラベルのフォントサイズが小さい

Fonts | Chart.js

②グラフの背景色

< グラフ画像を保存した時に背景が透明になっちゃってるから白にして

Canvas background | Chart.js

③グラフのサイズ

< 画面からはみ出てるから直して

これは私も気になっていた・・
グラフの下が画面からはみ出てスクロールが必要な状態になっている。

(↑下がはみ出て見切れている)

responsive の設定

そもそもcanvasサイズを指定しているのに反映されないのが不思議だったのですが、

Chart.js はデフォルトでレスポンシブのオプションがtrueになっているからでした。
これを false にすると、指定したサイズで表示されるようになりました。

maintainAspectRatio

maintainAspectRatio という設定もあり、
こちらはレスポンシブの時に元のアスペクト比を維持する設定で、
デフォルトで true になっているようでした。

最初 canvas サイズを400×400 で設定していたから、
正方形になって伸びてしまっていたようです。

maintainAspectRatio を false に設定することで、
横幅がレスポンシブ対応になり、高さが固定表示になるようでした。

canvas は div で囲む

上記を設定する際は、canvas を div 等で囲む必要がありました!

囲んでいないと、
グラフの縦幅がどんどん伸びていく怪奇現象に見舞われました🥲

親コンテナ注意点

いくつか注意点があるようです。

  • サイズはcanvas自体ではなく親コンテナで指定する
  • 親コンテナには position:relative を指定
  • コンテナには canvas のみがある状態(他の要素が入っていてはだめ)

↓引用↓

キャンバスサイズ変更を、CANVAS要素から直接の検出することはできません。 キャンバスレンダリングサイズとディスプレイサイズを更新するために、Chart.jsでは親コンテナを使用します。ただしこの方法では、コンテナが相対配置(position:relative)されていることと、チャートキャンバスのみを含むことが必要です。これにより、コンテナサイズの相対値を設定することでレスポンシブ機能が実現できます。

レスポンシブ · Chart.js 日本語ドキュメント

 

とりあえず今回は  height:80vh; width:100%; にすることで
だいたい画面いっぱいに表示することができました。

ちゃんと画面に収まるようになり、だいぶ見やすくなりました!

これでひとまずグラフ化、完了🙌

 

コメントはこちらから

メールアドレスが公開されることはありません。コメントのみでもOKです。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください