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

分享:

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

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

 

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

options: {  
    responsive: true,
    maintainAspectRatio: false
}

 

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

 

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。