Resize highchart auf Container basiert nicht ändern Fenstergröße ändern

Question

hier ein Code Stift ist, der den Code illustriert ich hier stellen wird: https://codepen.io/andrewsunglaekim/pen/MmmxvO

Sie die schreckliche html nichts dagegen, ich eine einfache High-Charts Demo einfach kopiert.

Die Html ist einfach:

<div class="flexContainer"> 
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
    <div class='flexToggle'>Flex it</div> 
</div> 

einfaches Diagramm in einem Flex-Container verschachtelt.

Die CSS:

.flexContainer { 
    display: flex; 

} 

#container { 
    transition: flex 0.5s ease; 
    flex: 3; 
    background: red; 
} 

.flexToggle { 
    transition: flex 0.5s ease; 
    flex: 1; 
    background: green; 
} 

#container.flexed { 
    flex: 1; 
} 

.flexToggle.flexed { 
    flex: 3; 
} 

Hier ist die einfache jQuery-Skript, das die flexed Klasse wechselt:

$(".flexToggle").on("click", function(){ 
    $("#container").toggleClass("flexed") 
    $(".flexToggle").toggleClass("flexed") 
}) 

Ich möchte das Diagramm dynamisch mit den Übergang flex Elemente ändern. Alles, was ich gesehen habe, ist eine Arbeit um die Größenänderung von Fenstern zu nutzen, aber ich habe in diesem Fall kein solches Ereignis. Das Schreiben eines setInterval, um während des Übergangs neu zu zeichnen, scheint hacky. Gibt es ein Konfigurationsstück, das ich vermisse, das das wirklich einfach macht?

Answer 1

Nach einigen Recherchen, können Sie die horizontale Skalierung beheben, indem einfach

.highcharts-container, .highcharts-container svg { 
    width: 100% !important; 
} 

zum CSS Hinzufügen

Answer 2

Sie verpassen nichts. Es gibt keine eingebaute Möglichkeit, Größen-/Positionsänderungen mit JavaScript zu erkennen.

Die allgemein anerkannte Praxis dafür ist ein Intervall, das die Größe/Position des Elements von Zeit zu Zeit überprüft.

Tatsächlich läuft AngularJS auf diese Weise, es gibt ein Hauptintervall, das Dinge ständig überprüft und Ansichten aktualisiert, wenn sich die Werte ändern.