8

我在 rails 应用程序中使用带有 twitter bootstrap 的谷歌图表。

在流体布局中，如果跨度宽度减小，图表会溢出其父 div。

谷歌图表宽度可以用百分比给出吗？

请帮忙。

更新

我正在使用google_visualr gem。

这是我的控制器代码。

def home

  # Indents
  indent_status_table = GoogleVisualr::DataTable.new
  indent_status_table.new_column('string', 'STATUS')
  indent_status_table.new_column('number', 'COUNT')
  indent_status_table.add_rows(1)
  indent_status_table.set_cell(0, 0, 'Open')
  indent_status_table.set_cell(0, 1, 100)

  opts   = { :title => 'INDENT STATUS', :is3D => true }
  @indent_status_chart = GoogleVisualr::Interactive::PieChart.new(indent_status_table, opts)

end

这是我的 html.erb 代码

<div id='shipment_status_chart' style="width:100%; height:200px"></div>
<%= render_chart @shipment_status_chart, 'shipment_status_chart' %>

并在java脚本代码中。

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

});
4

2 回答 2

13

您可以在 HTML 中指定图表宽度

<div id="chart_div" style="width:100%; height:300px"></div>

来自谷歌图表文档：

在 HTML 中指定大小- 加载和呈现图表可能需要几秒钟。如果您已经在 HTML 中调整了图表容器的大小，则加载图表时页面布局不会跳转。

这是一个显示 100% 宽度的小提琴。

更新
要在窗口改变大小时调整图表大小，可以使用 jQuery 更新图表大小。

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

这是一个Fiddle显示 100% 宽度并在屏幕调整大小时更新。

于 2013-08-15T18:00:25.090 回答
1

我将 Google Charts 与ng-google-chart.js 一起使用，为了使我的图表具有响应性，我添加了style="max-width:100%"

例子：

<div class="row">
  <div class="col-md-3">
    <div google-chart style="max-width:100%" chart="chart"/>
  </div>
  <div class="col-md-3">
    <div google-chart style="max-width:100%" chart="chart"/>
  </div>
  <div class="col-md-3">
    <div google-chart style="max-width:100%" chart="chart"/>
  </div>
  <div class="col-md-3">
    <div google-chart style="max-width:100%" chart="chart"/>
  </div>
</div>
于 2013-11-01T10:11:25.607 回答