使用流畅的引导程序布局重新调整谷歌图表的大小

Question

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

}); 

Answer 1

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

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

来自Google Charts文档:

在HTML中指定大小 - 图表可能需要几秒钟才能加载和渲染.如果您的图表容器已按HTML大小调整,则在加载图表时页面布局不会跳转.

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

更新
要在窗口更改大小时调整图表大小,可以使用jQuery更新图表大小.

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

这是一个小提琴,显示100%宽度,屏幕大小调整更新.