ruby-on-rails – 使用流畅的引导程序布局重新调整谷歌图表的大

发布时间：2020-12-16 19:23:48 所属栏目：百科来源：网络整理

导读：我在rails应用程序中使用 google charts和twitter bootstrap. 在流体布局中,如果跨度宽度减小,则图表溢出其父div. 谷歌图表宽度可以百分比给出吗？请帮忙. 更新我正在使用google_visualr宝石. 这是我的控制器代码. def home # Indents indent_status_table

我在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.

这是一个显示100％宽度的Fiddle.

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

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

这是一个显示100％宽度的Fiddle,屏幕大小调整更新.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!