觸發器窗口在引導程序崩潰時調整大小

Question

我正在調整c3.js圖表​​的大小問題，這是我放置在引導程序崩潰div中的問題。類似於this question。在回答之後，我試圖在每次加載c3圖表時都觸發窗口大小調整，但似乎不起作用。我知道這是一個基本的問題（jquery無知），但我怎樣才能運行$(window).trigger('resize');每次我加載圖表或打開panel-collapse div？

HTML：

<div class="col-sm-4">     
    <div class="panel-group"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
        <a data-toggle="collapse" href="#collapse4"><center>Title</center></a> 
       </h4> 
      </div> 
      <div id="collapse4" class="panel-collapse collapse"> 
       <div id="chart3"></div> 
       <div class="panel-footer"></div> 
      </div> 
     </div> 
    </div> 
</div> 

JS：

$(function() { 
    var chart = c3.generate({ 
     bindto: '#chart3', 
     data: { 
      columns: [ 
       ['data1', 30], 
       ['data2', 50] 
      ], 
      type: 'donut', 
     } 
    }); 
    $(window).trigger('resize'); 
}); 

Answer 1

綁定到.click()事件：

$(document).ready(function() { 
    $(".panel-collapse collapse").click(function() { 
    $(window).trigger('resize'); 
    }); 
}); 

對於圖表負荷，這將取決於你如何調用它被生成。如果c3.generate()是圖形負載功能，然後創建另一個包裝功能部件，這就要求既c3.generate()和$(window).trigger('resize');然後總是加載圖表與：

function generateAndResizeWindow(options) { 
    options.onrendered = function() { $(window).trigger('resize') }; // or whatever function generates your graph 
    c3.generate(options); 
} 

然後調用爲：

generateAndResizeWindow({ 
    bindto: '#chart3', 
    data: { 
     columns: [ 
      ['data1', 30], 
      ['data2', 50] 
     ], 
     type: 'donut', 
    } 
}); 

爲你的榜樣。

Answer 2

在代碼後添加這些行。

chart.load({ 
    done: function() {$(window).trigger('resize');} 
});