[英]Google Charts API: Responsive Design
I just added a chart from Google Charts API into a webapp I'm working on. 我刚刚将Google Charts API中的图表添加到正在使用的Web应用程序中。 Just for some context, my webapp is built on AngularJS with Bootstrap. 仅在某些情况下,我的web应用程序是基于具有Bootstrap的AngularJS构建的。 The charts are inserted using the angular-google-chart module. 图表是使用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;
我尝试过制作width: 100%; height: 500px;
width: 100%; height: 500px;
but it displays whitespace on smaller widths. 但它会以较小的宽度显示空白。
Any suggestions greatly appreciated. 任何建议,不胜感激。
This thing works for me fine: 这件事对我来说很好:
Add a wrapper (div) on the main chart div and add following css 在主图表div上添加包装器(div),然后添加以下CSS
min-height:500px;height: 100%;width: 100%;margin:auto;background:#fff;text-align:center
Add the following CSS to the chart div: 将以下CSS添加到图表div中:
min-height:500px;height: 100%;width: 100%;margin:auto;background:#fff;text-align:center
Add a simple window resize function 添加一个简单的窗口调整大小功能
$(window).resize(function(){ drawChart(); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.