[chart.js] 讓圖表高度隨容器變化

分享:

使用 chart.js 雖然可以設定 canvas 的高度,但預設圖表高度會有一個比例,如果想要讓這個高度隨容器比例調整的話,可以把 canvas 外面設一個容器,並把 canvas 的高度設為 100%。

<canvas id="myChart"></canvas>

 

在建立圖表的時候設定一下 option

options: {  
    responsive: true,
    maintainAspectRatio: false
}

 

讓圖表不要維持一個固定的比例就可以了,這樣他的高度就會跟著容器變化。