css - Chartkick(google charts gem)在添加 Bootstrap 的折叠功能后忽略了我的渲染指令和压缩图表

Question

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

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

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

下面是可折叠 div 中压缩图表的样子:

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

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

属性 Controller 的 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'); });

可能有更好的方法来做到这一点，但这是一个好的开始。