javascript Google Charts API：响应式设计
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23846828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Charts API: Responsive Design
提问by mushroom
I just added a chart from Google Charts API into a webapp I'm working on. Just for some context, my webapp is built on AngularJS with Bootstrap. The charts are inserted using the angular-google-chartmodule.
我刚刚将 Google Charts API 中的图表添加到我正在开发的网络应用程序中。仅就某些情况而言，我的 web 应用程序是基于 AngularJS 和 Bootstrap 构建的。图表是使用angular-google-chart模块插入的。
How do I make the chart display responsive? What I'd like to do is to keep the chart full width, and based on that sized automatically with a proper height. I can't seem to get that working.
如何使图表显示响应？我想要做的是保持图表全宽，并根据该大小自动调整适当的高度。我似乎无法做到这一点。
I have tried making width: 100%; height: 500px;but it displays whitespace on smaller widths.
我试过制作，width: 100%; height: 500px;但它在较小的宽度上显示空白。
Any suggestions greatly appreciated.
任何建议都非常感谢。
回答by Sid Vishnoi
This thing works for me fine:
这件事对我有用：
Add a wrapper (div) on the main chart div and add following css
min-height:500px;height: 100%;width: 100%;margin:auto;background:#fff;text-align:centerAdd the following CSS to the chart div:
min-height:500px;height: 100%;width: 100%;margin:auto;background:#fff;text-align:centerAdd a simple window resize function
$(window).resize(function(){ drawChart(); });
在主图表 div 上添加一个包装器 (div) 并添加以下 css
min-height:500px;height: 100%;width: 100%;margin:auto;background:#fff;text-align:center将以下 CSS 添加到图表 div：
min-height:500px;height: 100%;width: 100%;margin:auto;background:#fff;text-align:center添加简单的窗口大小调整功能
$(window).resize(function(){ drawChart(); });
