ruby-on-rails - 使用流畅的 Bootstrap 布局重新调整谷歌图表的大小

Question

我正在使用 google charts在 rails 应用程序中使用 twitter Bootstrap 。

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

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

请帮忙。

更新

我正在使用 google_visualr gem 。

这是我的 Controller 代码。

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

}); 

Answer 1

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

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

来自谷歌图表文档:

Specifying the size in HTML - A chart can take a few seconds to load and render. If you have the chart container already sized in HTML, the page layout won't jump around when the chart is loaded.

这是 Fiddle显示 100% 宽度。

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

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

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