chart.js4系でグラフサイズ設定方法を詳しく
先の質問「chart.js4.2でカラー設定をする方法 ・・https://okwave.jp/qa/q10117946.html」のコードで描画すると棒グラフが上半分くらいに圧縮されたようにしか描画されなかったのでそれを直すために
datasets: datasets
},
options: {
maintainAspectRatio: false,
plugins: {
としていましたが、これを回答してもらったコードに加えると棒グラフの縦幅が大きくなりすぎ下のグラフと重なるような状態となりました。
デフォルトでは、
「リサイズしても、元のキャンバスの縦横比(幅/高さ)は維持されます。」
とあります。さらに縦横比(幅/高さ)に関し
「aspectRatio number 1|2 キャンバスの縦横比(すなわち、幅 / 高さ、値 1 は正方形のキャンバスを表す)。なお、このオプションは、高さが属性として、またはスタイルによって明示的に定義されている場合は無視されます。放射状チャート(ドーナツ、パイ、polarArea、レーダー)のデフォルト値は1、その他のチャートのデフォルト値は2です。
」
それで最初の棒グラフでは縦横比が1/2になっているためとなんとなくこの動きは理解できましたが、しかし後の方でもcssのスタイル設定で明示的に
.container .chart1 {
margin-bottom: 0;
width: 400px;
height: 350px;
}
としているのに「スタイルによって明示的に定義されている場合は無視されます」ありますが1/2のままです。そこでmaintainAspectRatio: falseを加えて初めてスタイル設定が有効になります。
2系に比べ4系は本家のサイトによる情報が主ですし英語は翻訳サイトを使うしか能がないため理解できないことがすこぶる多いのが現状ですので、宜しければ、適正なサイズの設定方法に関する明快で詳しい情報のご教授お願いいたします。