クリックできない問題
クリックできない問題の続きがあり結局解決した。 原因はロゴのCSSで、元々下記のように指定していた。
.logo {
height: 200px;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 8px;
margin-left: 0px;
}
画面上は高さ70pxのナビゲーションバーに納まって見えていたものの、実際のCSSとしては上記のように指定されていたのでロゴがデカデカと認識されてナビゲーションバー直下の子要素の右上にあるリンクと被っていたのでクリックできなくなっていた。
なまじブラウザが賢いせいで表示だけを見ていても原因がわからないエラーもあることがわかった。。。。
display: flexで子要素のwidthが効かない問題
下記のようなスタイルだと子要素のwidthが100%にならず、謎の余白が残っていた。
.parentClass {
display: flex;
justify-content: center;
width: 100%;
}
.childClass {
width: 100%;
}
ブラウザで確認しても特に変なmargin, paddingは設定されていなかったので、GPTに聞いてみるとdisplay: flexとjustify-content: centerを組み合わせると子要素のwidthが効かない場合があると。 果たしてメディアクエリでモバイルだけ削除してみると期待通りに100%で表示された。 こういうエラーが出ない系の意図しない動作は直しにくい。
チャートのカテゴリ名表示問題
凡例ではなくチャートの中にカテゴリ名を埋め込みたかった問題は↓の動画で解決した。 chartjs-plugin-datalabelsのインストールにちょっと手間取ったけどそれも--legacy-peer-depsで一旦Skip。 やっぱり公式の提供する情報を参照するのが一番。
チャートリサイズ問題
Pie Chartの表示が下部に寄っていたのでなんでかなと思っていたが、titleの表示がTrueになっていたからだった。 falseに変えることで中央寄せになってリサイズされて解決。
const options = {
maintainAspectRatio: true,
responsive: true,
plugins: {
legend: {
display: true,
position: 'top',
},
title: {
display: false,
}
}
};
legendを上位３つだけ、さらにPie Chartの中にValueではなくてCategory Nameを表示したいんだけど、これはどうすればいいんだろうか。
リサイズ問題 ちょっと進展
リサイズ問題が少しだけ進展 react-chartjs-2を使っている場合下記のように指定してやるとレスポンシブになる。
const options = {
maintainAspectRatio: true, // アスペクト比を維持する
responsive: true, // レスポンシブに対応する
--- その他options ---
}
あとは親要素のCSSでwidth, heightを適切に設計してあげるときちんと枠内に納まるみたい。 optionはまさに名称そのものになっているのでやっぱり公式ドキュメントをちゃんと読んで指示に従うのが最も効率的。 自分が思いつく（困る）ようなことはそりゃライブラリの作者はもちろんぶつかっているわけで解決策は大体提供されている。
チャートリサイズ問題
MVP的なものはできて機能はひと段落した。 次の課題はレイアウト・デザイン修正。
Chart.jsを使用して円グラフ、折れ線グラフを描いているのだか描画エリアのリサイズが上手く行かない。 通常のブラウザだとまぁまぁ見れる範囲で表示されるがMobileだと訳がわからない表示になる。
こういうのは公式を見て対応すべきなんだろうけどいまいちよくわからない。 コンテナの中を分割してその領域の中でMAXに表示して欲しいんだけど、どうすればいい感じにできるんだろうか。
