Größe des Auslöserfensters bei Bootstrap-Komprimierung ändern

Question

Ich habe Probleme mit der Dimensionierung eines c3.js-Diagramms, das ich in einem Bootstrap-Collapsediv platziert habe. Ähnlich wie this question. Nach den Antworten versuche ich jedes Mal, wenn das c3-Diagramm geladen wird, eine Fenstergrößenänderung auszulösen, aber es scheint nicht zu funktionieren. Ich weiß, dass es eine grundlegende Frage ist (jquery ignorant), aber wie kann ich $(window).trigger('resize'); jedes Mal laufen, wenn ich das Diagramm lade oder das Panel-Collapse div öffne?

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

binden an die .click() Ereignis:

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

Für die Grafik Last, wird es davon abhängen, wie Sie anrufen es soll erzeugt werden. Wenn c3.generate() die Graph Ladefunktion ist, erstellen Sie dann eine andere Wickelfunktion, die sowohl c3.generate() ruft und $(window).trigger('resize'); dann immer das Diagramm mit dem laden:

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

dann rufen:

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

für Ihr Beispiel.

Answer 2

Fügen Sie diese Zeilen nach Ihrem Code hinzu.

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