Resize c3.js Diagramm nach "display: none" Entfernen Form div

Question

So habe ich eine Funktion Lastelement vorzunehmen und verwenden "display: none" zu versteckt ein Diagramm

<div class="col-sm-9 topTenWebCus" ></div> 

javscript:

$(document).ready(function() { 
    window.setTimeout(function(){ 
     $(".topTenWebCus").css("display","none"); 
     },200); 
}); 

Und danach bekam ich eine andere Funktion Onclick die zu entfernen "display: none" css

$("#buttonFire").click(function(){ 
         $(".topTenWeb30d").css("display","none"); 
         $(".topTenWebCus").css("display","block"); 
        }); 

Es funktioniert gut. aber es würde sich nicht selbst neu dimensionieren, selbst wenn ich einen Bootstrap in die Webseite einfüge.

Ich denke darüber nach innere Funktionen zu verwenden .resize() aber es funktioniert nicht, gibt es eine bessere Möglichkeit, das Problem der Größenänderung zu beheben?

Update 1:

Die Grafik selbst Zoomrate, wenn der Benutzer ändert die Größe würde.

Ich finde nur eine wichtige Sache, das Diagramm wird korrekt angezeigt, wenn die Zoomrate 100% ist, aber wenn der Benutzer die Zoomrate ändert, wird das Diagramm nicht auf eine geeignete Größe ändern.

Update2 Ich versuche zu verwenden .show() und .Hide(), aber kein Glück

Probenlösung

$("#buttonFire").click(function(){ 
         $(".topTenWeb30d").css("display","none"); 
         $(".topTenWebCus").css("display","block"); 
          chart.flush() // chart depends on your chart's name it could be anything like charrt112.flush() 
        }); 

Answer 1

Ihr Problem scheint nicht mit borstst zu sein Rap. Überprüfen Sie diese jsFiddle, Ihr genauer Code funktioniert gut für die Anzeige der richtigen Spaltenbreite nach der Anzeige zurück.

Ohne weitere Informationen über die Charting-Bibliothek, die Sie verwenden, meine Vermutung ist wie die meisten Charting-Bibliotheken Ihre Größe erhält, wenn es zuerst gerendert wird. Wenn sich die div-Größe ändert, müssen Sie Dinge wie resize, redraw oder referesh usw. auf Ihrem Diagrammobjekt manuell aufrufen, abhängig von Ihrer Diagrammbibliothek.

Wenn Sie Ihre Diagrammbibliothek hervorheben können oder besser noch mein jsFiddle-Beispiel aktualisieren können, um Ihr Diagramm anzuzeigen, wird es einfacher sein, herauszufinden, wie Sie das Diagramm wiederherstellen können.

Update für c3.js

Nachdem Sie Ihre div versuchen erneut angezeigt chart.flush(); aufrufen und sehen, ob es richtig skaliert.

$("#buttonFire").click(function(){ 
    $(".topTenWeb30d").css("display","none"); 
    $(".topTenWebCus").css("display","block"); 
    chart.flush(); // use reference to your chart object 
}); 

Wenn die chart.flush() nicht funktioniert, als letzte Option, die Sie auf Ihren div Dimensionen dynamisch basierend wie so die Breite, Höhe des Diagramms festlegen.

chart.resize({ 
    height: $(".topTenWebCus").innerHeight(), 
    width: $(".topTenWebCus").innerWidth() 
}); 

Answer 2

Ich glaube, Sie dies verlangen, wenn ich Sie richtig bin Verständnis :

$(window).resize(function(){ 
    $("#buttonFire").trigger('click'); 
});