Google Charts API:响应式设计

Question

我刚刚将Google Charts API中的图表添加到我正在处理的webapp中.仅针对某些上下文,我的webapp是在带有Bootstrap的AngularJS上构建的.使用angular-google-chart模块插入图表.

如何使图表显示响应？我想做的是保持图表的全宽,并根据适当高度自动调整大小.我似乎无法做到这一点.

我试过制作,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();
   });