# レスポンシブチャート
ウィンドウサイズに基づいてチャートのサイズを変更する場合、主な制限事項は、キャンバスのレンダリングサイズ（canvas.widthおよび.height）が、表示サイズ（canvas.style.widthおよび.height）とは異なり、相対値で表現できないことです。さらに、これらのサイズは互いに独立しており、キャンバスのレンダリングサイズは表示サイズに基づいて自動的に調整されないため、レンダリングが不正確になります。
以下の例は機能しません
<canvas height="40vh" width="80vw">：無効な値です。キャンバスのサイズは変更されません（例 (新しいウィンドウで開きます)）<canvas style="height:40vh; width:80vw">：無効な動作です。キャンバスのサイズは変更されますが、ぼやけます（例 (新しいウィンドウで開きます)）<canvas style="margin: 0 auto;">：無効な動作です。キャンバスが継続的に縮小します。Chart.jsでは、各キャンバスに専用のコンテナーが必要であり、このスタイルはそこに適用する必要があります。
Chart.jsは、キャンバスの表示サイズが変更されたときに検出し、それに応じてレンダリングサイズを更新することにより、レスポンシブを有効にし、チャートのサイズ変更の動作を制御するためのいくつかのオプションを提供します。
# 設定オプション
名前空間：options
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
responsive | boolean | true | コンテナのサイズが変更されると、チャートのキャンバスのサイズを変更します（重要な注意...）。 |
maintainAspectRatio | boolean | true | サイズ変更時に元のキャンバスのアスペクト比(幅 / 高さ)を維持します。 |
aspectRatio | number | 1|2 | キャンバスのアスペクト比（つまり、幅 / 高さ、1は正方形のキャンバスを表す値）。このオプションは、高さが属性またはスタイルで明示的に定義されている場合は無視されることに注意してください。デフォルト値はチャートの種類によって異なります。放射状チャート（ドーナツ、円、極座標、レーダー）はデフォルトで1になり、その他はデフォルトで2になります。 |
onResize | function | null | サイズ変更が発生したときに呼び出されます。チャートインスタンスと新しいサイズの2つの引数が渡されます。 |
resizeDelay | number | 0 | 指定されたミリ秒数だけサイズ変更の更新を遅らせます。これにより、要素の更新をデバウンスすることにより、サイズ変更プロセスを容易にできます。 |
# 重要な注意
キャンバスサイズの変更を検出することは、canvas要素から直接行うことはできません。Chart.jsは、その親コンテナを使用してキャンバスのレンダリングサイズと表示サイズを更新します。ただし、このメソッドでは、コンテナが相対的に配置され、チャートキャンバス専用である必要があります。これにより、コンテナサイズに相対値を設定することで、レスポンシブを実現できます（例 (新しいウィンドウで開きます)）
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
<canvas id="chart"></canvas>
</div>
コンテナのサイズを変更することで、プログラムでチャートのサイズを変更することもできます
chart.canvas.parentNode.style.height = '128px';
chart.canvas.parentNode.style.width = '128px';
上記のコードでチャートの高さを正しくサイズ変更するには、maintainAspectRatioオプションもfalseに設定する必要があることに注意してください。
# サイズ変更可能なチャートの印刷
CSSメディアクエリを使用すると、ページを印刷するときにスタイルを変更できます。これらのメディアクエリから適用されるCSSにより、チャートのサイズ変更が必要になる場合があります。ただし、サイズ変更は自動的には行われません。印刷時にチャートのサイズ変更をサポートするには、onbeforeprint (新しいウィンドウで開きます)イベントにフックし、各チャートのサイズ変更を手動でトリガーする必要があります。
function beforePrintHandler () {
for (let id in Chart.instances) {
Chart.instances[id].resize();
}
}
また、ブラウザが印刷用にドキュメントをレイアウトするタイミングと、サイズ変更イベントが発生するタイミングの複雑さにより、Chart.jsが印刷レイアウトに合わせて適切にサイズ変更できない場合があることがわかります。これを回避するには、.resize()に明示的なサイズを渡し、onafterprint (新しいウィンドウで開きます)イベントを使用して、完了時に自動サイズを復元できます。
window.addEventListener('beforeprint', () => {
myChart.resize(600, 600);
});
window.addEventListener('afterprint', () => {
myChart.resize();
});