我在rails应用程序中使用
google charts和twitter bootstrap.
在流体布局中,如果跨度宽度减小,则图表溢出其父div.
谷歌图表宽度可以百分比给出吗？
请帮忙.
更新
我正在使用google_visualr宝石.
这是我的控制器代码.
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,'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();
});
});
解决方法
您可以在HTML中指定图表宽度
<div id="chart_div" style="width:100%; height:300px"></div>
来自Google Charts文档：
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.
更新
要在窗口更改大小时调整图表大小,可以使用jQuery更新图表大小.
$(document).ready(function () {
$(window).resize(function(){
drawChart();
});
});