トリガーウィンドウがブートストラップコラプス時にサイズ変更

Question

ブートストラップコラプスディビジョンに配置されたc3.jsチャートのサイジングに問題があります。 this questionと同様です。答えに続いて、私はc3のグラフがロードされるたびにウィンドウのサイズを変更しようとしていますが、動作していないようです。私は基本的な質問（jquery無知）のようなものだと知っていますが、$(window).trigger('resize');をチャートをロードするたびに、またはパネルを折りたたむ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');の両方を呼び出し、別のラッピング機能、作成します。

ご例えば

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

：

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

することは、その後のように呼び出します。

Answer 2

コードの後に​​これらの行を追加します。

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