Chartkick（google charts gem）は、ブートストラップの折りたたみ機能を追加した後、私のレンダリングの手順とスクイーズチャートを無視しています

Question

私は、「twitter-bootstrap-rails」宝石のバージョン3.2.2を使用していますここの診断に。

基本的に私はchartkick宝石を使用して作成した小さなデータ視覚化アプリケーションでパネルを折りたたむ機能を得るために、いくつかのドキュメント例をオンラインで使用しました。私は折りたたみ機能を持っていましたが、折りたたみ可能なdivの中のチャートは、高さと幅の追加が指示されているにもかかわらず、400px X 200px rect要素に絞られています。

グラフは次のようになります。これらは、折りたたみ可能なdiv要素の中に置かれていないチャート（私もそうデータに関して/ wのプライバシーを心配し、ここで不動産デベロッパーではないよ）

そして、ここでは何を絞ったチャートだです折り畳み式のdivの内側のようになります。でも、知らない人は何

することは、時間にそれがこの質問を書くために連れて行ってくれたので、私は、自分自身を表示するバグを取得するためにページをリロードするために、チャートを持っていたということです何とかそれ自体を修正していた。ランダムに起こりますが、通常は少なくとも1分かかります。場合によっては、Webインスペクタを開いて要素を指し示すと、「自分自身を修正する」ことができます。これは、自発的な自己修正後のように見えるものです：

自己フィックスのみ既に崩壊div要素のために働いていました。折りたたまれていない要素は、少なくとも最初は拡張された後も収縮したままです。

プロパティコントローラーのindex.html.erbページのコード。本当に独占的なものはありません。クライアントのWebブラウザから取ら

<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で作成されたrectボックスを扱うこの記事では、誰かがrectボックスの高さと幅を編集する方法を知っていますかチャート自体の外部コンテナとして機能しますか？ここにバッファーが多すぎます。

Answer 1

私は土台レールにChartkickと同じ問題を抱えていました。問題は、展開時にresizeイベントハンドラがトリガされないことです。

は、例えば、私は私の拡張可能な要素のための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'); }); 

私は、resizeイベントハンドラをトリガするためにクリックイベントの下に、次を追加しました：

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

これを行うには良い方法があるかもしれませんが、それは良いスタートです。