Google Charts API：自適應設計

Question

我剛剛將Google Charts API中的圖表添加到正在使用的Web應用程序中。 僅在某些情況下，我的web應用程序是基於具有Bootstrap的AngularJS構建的。 圖表是使用angular-google-chart模塊插入的。

如何使圖表顯示響應？ 我想做的是保持圖表全寬，並根據該大小自動設置適當的高度。 我似乎無法正常工作。

我嘗試過制作width: 100%; height: 500px; width: 100%; height: 500px; 但它會以較小的寬度顯示空白。

任何建議，不勝感激。

Answer 1

這件事對我來說很好：

1. 在主圖表div上添加包裝器（div），然后添加以下CSS

    min-height:500px;height: 100%;width: 100%;margin:auto;background:#fff;text-align:center 

2. 將以下CSS添加到圖表div中：

    min-height:500px;height: 100%;width: 100%;margin:auto;background:#fff;text-align:center 

3. 添加一個簡單的窗口調整大小功能

    $(window).resize(function(){ drawChart(); });