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系は本家のサイトによる情報が主ですし英語は翻訳サイトを使うしか能がないため理解できないことがすこぶる多いのが現状ですので、宜しければ、適正なサイズの設定方法に関する明快で詳しい情報のご教授お願いいたします。

回答No.1

retorofan · ベストアンサー

chart.js4.2でカラー設定をする方法

＞前のコードで描画すると棒グラフが上半分くらいに圧縮されたようにしか描画されなかった

そやあ、そうでしょう！？
オプションに maintainAspectRatio が書かれていなくても
デフォルト値は maintainAspectRatio: true
それが適用されたのですから アスペクト比は ２：１ で描画されています。
（つまり、高さが短く表示される）

キャンバスのサイズが、
　width: 400px;
　height: 350px;

このスタイルで、２：１の比率にしようとした時
縦を基準にしようとしたら ７００：３５０ でないといけないけれど
横サイズがそんなにないために適用できない。

横を基準にしようとすれば、高さが３５０あるから
４００：２００は可能なので、こちらが適用された。

ここで重要なことは、
キャンバスのサイズに単位「ｐｘ」を使っていても
ピクセルではなくて、数値の比率で判断される、ということ。

＞「スタイルによって明示的に定義されている場合は無視されます」ありますが1/2のままです。

スタイル設定してあっても、maintainAspectRatio が記述されていなければ、
maintainAspectRatio: true
が適用されたことと同じです。それがデフォルトなんだから。

＞そこでmaintainAspectRatio: falseを加えて初めてスタイル設定が有効になります。

falseは「固定アスペクト比を解除しなさい」ということ。
つまり「２：１ルールに従わなくてもいいよ」と指示したことになります。
その結果、スタイル設定が反映されて縦サイズが活かされて長く表示されたのです。

【適正なサイズの設定方法にするには】
・固定アスペクト比を保持したければ 次を書くか、書かないこと。
　maintainAspectRatio: true
・自分の思い通りの縦横サイズにしたければ スタイル記述と下記は必須
　maintainAspectRatio: false

chart.jsにおいては、図形描画に際して、
・キャンバス要素の親要素のサイズが重要で、それによって表示領域が決まる
・キャンバスにサイズを書かなくても問題ない
ということを付け加えておきます。

お礼

早速の回答ありがとうございます。
なるほど
>スタイル設定してあっても、maintainAspectRatio が記述されていなければ、
>maintainAspectRatio: true
>が適用されたことと同じです。それがデフォルトなんだから。
ですか、疑問については自信はありませんが納得しました。
ここでさらに理解できないことがありまして、2.9系で
<canvas id="myChart2" width="550" height="450">
としていたが4系では、効かないと思っていましたが、
2.9系のコードを <script src部分だけ4.2.1に置き換えて
<canvas id="myChart1" width="250" height="250">
と小さく設定し
options: {
responsive: false,
としたところ棒グラフのサイズが小さく変化しました。
先程の回答を見る前にさらなる混乱を来しておりました。<canvas内での設定とresponsive: falseの関係をお教えください。

回答No.2

retorofan

一件落着したら
別質問で上げてくださるようお願いいたします。
そうでないと、果てしなく続くことになってしまいますので。
よろしくお願い申し上げます。