# 響應式圖表

當需要根據視窗大小改變圖表尺寸時，一個主要的限制是畫布的渲染尺寸（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`	`布林值`	`true`	當容器調整大小時，調整圖表畫布的大小（重要注意事項...）。
`maintainAspectRatio`	`布林值`	`true`	調整大小時，保持原始畫布的長寬比 `(寬度 / 高度)`。
`aspectRatio`	`數值`	`1`\|`2`	畫布長寬比 (即 `寬度 / 高度`，值為 1 表示正方形畫布)。請注意，如果高度明確定義為屬性或透過樣式定義，則會忽略此選項。預設值因圖表類型而異；環形圖、圓餅圖、極地區域圖和雷達圖預設為 `1`，其他圖表則預設為 `2`。
`onResize`	`函式`	`null`	當發生調整大小時呼叫。會傳遞兩個參數：圖表實例和新的尺寸。
`resizeDelay`	`數值`	`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();
});

← 地區設定副標題 →