Chartkick (google gem Charts) ist meine Rendering-Anweisungen ignoriert und Diagramme Quetschen nach

Question

Bootstrap Zusammenbruch Funktionalität Hinzufügen

ich auf Schienen bin, mit dem 'twitter-Bootstrap-rails' Juwel, Version 3.2.2, die können oder auch nicht relevant sein zur Diagnose hier.

Also im Grunde habe ich einige Beispiele Dokumentation online zu bekommen eine Panel-kollabierenden Funktionalität auf einer kleine Datenvisualisierungsanwendung verwende Ich habe mit dem chartkick Juwel gemacht. Ich habe die Klappbarkeitsfunktionalität, aber jetzt werden die Diagramme innerhalb meiner zusammenklappbaren divs in 400px X 200px rect Elemente gequetscht trotz meiner Anweisungen für Höhe und Breite hinzugefügt.

Hier ist, was die Charts aussehen sollte. Dies sind die Diagramme sind, die nicht in zusammenklappbar div Elemente gelegt worden (ich bin die Immobilien-Entwickler auch hier so keine Sorgen um Privatsphäre w/Bezug auf Daten)

Und hier ist es, was die gepressten Chart innerhalb der zusammenklappbaren divs wie folgt aussehen:

Was noch seltsamer ist, dass ich die Seite neu zu laden hatte, sich zu zeigen den Fehler zu bekommen, weil in der Zeit, es hat mich diese Frage zu schreiben, das Diagramm hatte sich irgendwie behoben. Es passiert zufällig, dauert aber normalerweise mindestens eine Minute. Manchmal kann ich es "reparieren", wenn ich den Web Inspector öffne und auf die Elemente zeige. Dies ist, was es sieht aus wie nach einer spontanen Selbst fix:

Die Selbst fix nur für die bereits zusammengeklappten div Elemente gearbeitet. Die nicht kollabierten Elemente bleiben geschrumpft, nachdem sie zumindest anfänglich expandiert wurden.

Code für die index.html.erb Seite für die Eigenschaften Controller. Hier ist nichts proprietäres.

<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 %> 

-Code von Client-Webbrowser genommen: gist

Dank! Hoffe, ich habe es so einfach wie möglich für jemanden gemacht zu assistieren

Auch während wir auf dieses Thema der Handhabung der Rect-Boxen von chartkick erstellt, weiß jemand, wie man die Höhe und Breite der Rect Box bearbeiten dient als äußerer Behälter für das Diagramm selbst? Hier ist zu viel Puffer.

Answer 1

hatte ich das gleiche Problem mit Chartkick in Fundament-Schienen. Das Problem besteht darin, dass die Größenänderungs-Event-Handler beim Expandieren nicht ausgelöst werden.

Zum Beispiel hatte ich den folgenden Code in einer js-Datei für meine erweiterbaren Elemente:

$(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'); }); 

Ich habe folgende unter dem Click-Ereignisse der Resize-Event-Handler auszulösen:

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

Dies funktioniert gut:

$(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'); }); 

Es könnte einen besseren Weg, dies zu tun, aber Es ist ein guter Anfang.