Chartkick（google 图表 gem）在添加 bootstrap 的折叠功能后忽略了我的渲染指令和压缩图表

Question

我在 rails，使用 'twitter-bootstrap-rails' gem，版本 3.2.2，可能与这里的诊断相关也可能不相关。

基本上，我使用了一些在线文档示例，在我使用 chartkick gem 制作的小型数据可视化应用程序上获得了面板折叠功能。我获得了可折叠功能，但现在我的可折叠 div 中的图表被挤压成 400px X 200px rect 元素，尽管我添加了关于高度和宽度的说明。

图表应该是这样的。这些是尚未放入可折叠 div 元素中的图表（我也是这里的房地产开发商，所以不担心数据隐私问题）

这里是可折叠 div 中压缩图表的样子：

更奇怪的是，我必须重新加载页面才能让错误显示出来，因为在我写这个问题的时候，图表已经以某种方式自行修复了。随机发生，但通常至少需要一分钟。有时，如果我打开 Web 检查器并指向元素，我可以将其设置为 "fix itself"。这是自发自我修复后的样子：

自我修复仅适用于已经折叠的 div 元素。未折叠的元素在展开后仍然收缩，至少在最初是这样。

属性控制器 index.html.erb 页面的代码。这里真的没有专有的东西。

<h1>Properties</h1>
    <% @properties.each do |p| %>
        <div class="panel panel-default">
            <div class="panel-heading"><h3><%= p.name %> Hard & Soft Costs Per Draw</h3></div>
            <div class="panel-body">
                <% hard_costs = p.hard_costs %>
                <% soft_costs = p.soft_costs %>     
                <% construction_contract_estimates = hard_costs.map(&:sv_construction_contract) %>
                <%= construction_contract_estimates.pctg_change %> Change in Construction Contract Estimate from Draw 1 to Draw <%= hard_costs.last.draw_i %>
                <%= column_chart [{:name => "Hard Cost Left to Go", :data => hard_costs.map{|hc| [hc.draw_i, hc.b2f_construction_contract.to_i]}}, {:name => "Hard Cost Draw", :data => hard_costs.map{|hc| [hc.draw_i, hc.cd_construction_contract.to_i]}}, {:name => "Total Hard Cost Estimate", :data => hard_costs.map{|hc| [hc.draw_i, hc.sv_construction_contract.to_i]}} ], :height => "800px" %>
                <%= column_chart hard_costs.map{|r| [r.draw_i, r.cd_construction_contract] }%>

                <%# collapsible column chart 1%>
                <div class="panel panel-default" style="display: block;">
                    <% softcosts_pd_graph_id = "#{p.name.sanitize}_scpd_chart_id" %>
                    <div class="panel-heading">Soft Costs Per Draw Graph (<a href="#<%= softcosts_pd_graph_id %>" data-toggle='collapse'>Show/Hide</a>) (click twice to hide the first time)</div>
                    <div class="panel-body collapse" id="<%= softcosts_pd_graph_id %>">
                        <%= column_chart p.soft_costs.map{|sc| [sc.draw_i, sc.cd_total_soft_costs.to_i] } , :library => {:xtitle => "Draw #", :ytitle => "Soft Cost Draw", :width => "800px"}  %>
                    </div>
                </div>

                <%# collapsible series of pie charts %>
                <div class="panel panel-default" style="display: block;">
                    <% softcosts_pd_pies_id = "#{p.name.sanitize}_scpd_pies_id"%>
                    <%# figure out how to use glyph icons and use 'glyphicon-collapse-down' and '...-up' %>
                    <div class="panel-heading">Soft Costs Per Draw Pie Charts (<a href="#<%= softcosts_pd_pies_id %>" data-toggle='collapse'>Show/Hide</a>) (click twice to hide the first time)</div>
                    <div class="panel-body collapse" id="<%= softcosts_pd_pies_id %>">
                        <ul class="list-group">
                            <% p.soft_costs.each do |sc| %>
                                <li class="list-group-item">Draw <%= sc.draw_i %>:          
                                    <h4>Soft Cost Draw #<%= sc.draw_i %>: <%= number_to_currency sc.cd_total_soft_costs %> </h4>
                                    <%= pie_chart sc.breakdown_chart_data.sort_by{|x,y| y}.reverse, :library => {:legend => {position: "right"} } %>
                                </li>
                            <% end %>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    <% end %>

从客户端网络浏览器获取的代码：gist

谢谢！希望我已经尽可能容易地帮助别人

此外，当我们讨论处理由 chartkick 创建的矩形框这个主题时，有谁知道如何编辑用作图表本身外部容器的矩形框的高度和宽度？这里缓冲区太多了。

Answer 1

我在 foundation-rails 中遇到了与 Chartkick 相同的问题。问题是扩展时不会触发调整大小事件处理程序。

例如，我在可扩展元素的 js 文件中有以下代码：

$(function() {
$('tr.parent')
    .css("cursor","pointer")
    .attr("title","Click to expand/collapse")
    .click(function(){
        $(this).siblings('.child-'+this.id).toggle();
    });
$('tr[class^=child-]').hide().children('td'); });

我在点击事件下添加了以下内容以触发调整大小事件处理程序：

var evt = document.createEvent('Event');
evt.initEvent('resize', true, true);
window.dispatchEvent(evt);

这很好用：

$(function() {
$('tr.parent')
    .css("cursor","pointer")
    .attr("title","Click to expand/collapse")
    .click(function(){
        $(this).siblings('.child-'+this.id).toggle();
        var evt = document.createEvent('Event');
        evt.initEvent('resize', true, true);
        window.dispatchEvent(evt);
    });
$('tr[class^=child-]').hide().children('td'); });

可能有更好的方法来执行此操作，但这是一个好的开始。

Chartkick（google 图表 gem）在添加 bootstrap 的折叠功能后忽略了我的渲染指令和压缩图表

Chartkick (google charts gem) is ignoring my rendering instructions and squeezing charts after adding bootstrap's collapse functionality

css

ruby-on-rails

google-visualization

twitter-bootstrap

chartkick