twitter-bootstrap 使用流畅的引导程序布局重新调整谷歌图表的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18258629/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Re-sizing google charts with fluid bootstrap layout
提问by Bot
I am using google chartswith twitter bootstrap in rails application.
我在 Rails 应用程序中使用带有 twitter bootstrap 的谷歌图表。
In fluid layout if the span width decreases, the chart overflows its parent div.
在流体布局中，如果跨度宽度减小，图表会溢出其父 div。
Can google chart width be given in percentages?
谷歌图表宽度可以以百分比给出吗？
Please help.
请帮忙。
Update
更新
I am using google_visualrgem.
我正在使用google_visualrgem。
Here is my controller code.
这是我的控制器代码。
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
And here is my html.erb code
这是我的 html.erb 代码
<div id='shipment_status_chart' style="width:100%; height:200px"></div>
<%= render_chart @shipment_status_chart, 'shipment_status_chart' %>
And in java script code.
并在java脚本代码中。
$(function() {
$(window).resize(function(){
drawChart();
});
});
回答by doitlikejustin
You can specify the chart width in the HTML
您可以在 HTML 中指定图表宽度
<div id="chart_div" style="width:100%; height:300px"></div>
From Google Charts documentation:
来自谷歌图表文档：
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.
在 HTML 中指定大小- 加载和呈现图表可能需要几秒钟的时间。如果您已经在 HTML 中设置了图表容器的大小，则在加载图表时页面布局不会跳动。
Here is a Fiddleshowing 100% width.
这是一个显示 100% 宽度的小提琴。
Update
To resize the chart when the window changes size, you can use jQuery to update the chart size.
更新
要在窗口更改大小时调整图表大小，可以使用 jQuery 更新图表大小。
$(document).ready(function () {
$(window).resize(function(){
drawChart();
});
});
Here is a Fiddleshowing 100% width with update on screen resize.
这是一个Fiddle，显示 100% 宽度并更新屏幕调整大小。
回答by Sjuul Janssen
I'm using Google Charts with ng-google-chart.jsand in order to make my charts responsive I've added style="max-width:100%"
我将 Google Charts 与ng-google-chart.js 一起使用，为了使我的图表具有响应性，我添加了style="max-width:100%"
Example:
例子：
<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>
