Chartkick (google charts gem) игнорирует мои инструкции по рендерингу и сжимает диаграммы после добавления функции свертывания бутстрапа

Question

Я нахожусь на рельсах, используя жемчужину «twitter-bootstrap-rails», версия 3.2.2, которая может быть или не быть релевантной к диагнозу здесь.

Итак, в основном я использовал некоторые примеры документации в Интернете, чтобы получить возможность сбрасывания панелей в небольшом приложении для визуализации данных, которое я сделал с использованием драгоценного камня chartkick. Я получил функциональность разборки, но теперь диаграммы внутри моих сворачиваемых divs сжимаются в элементы 400px X 200px rect, несмотря на то, что мои инструкции по добавлению высоты и ширины добавляются.

Вот как выглядят диаграммы. Эти диаграммы, которые не были помещены в разборные Div элементов (Я реальный разработчик недвижимости здесь, а так не беспокоится о конфиденциальности ж/касаемо данные)

А вот то, что выжимали графики внутри складных дивы выглядеть следующим образом:

что еще более странно, что мне пришлось перезагрузить страницу, чтобы получить ошибку, чтобы показать себя, потому что в то время он взял меня, чтобы написать этот вопрос, диаграмма как-то исправил себя. Бывает случайным образом, но обычно занимает не менее минуты. Иногда я могу заставить его «исправить себя», если я открою веб-инспектор и укажу на элементы. Это то, что она выглядит как после спонтанного самостоятельного исправления:

Самости фиксирует работала только для уже разрушились элементов 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

У меня была такая же проблема с 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'); }); 

Возможно, это лучший способ сделать это, но это хорошее начало.