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(); });