Meine Anwendung zeigt HighCharts-Diagramme in verschiedenen Registerkarten an (mit AngularJS). Beachten Sie, dass die Diagramme im laufenden Betrieb neu generiert werden Jedes Mal, wenn ein Tab ausgewählt wird (Dies bedeutet, dass Angular jedes Mal einen Teil des DOM-Baums entfernt oder neu erstellt.)

Mein Problem ist, dass die Größe des Diagramms korrekt istnur das erste mal Ich klicke auf eine Registerkarte. Wenn ich zwischen Registerkarten wechsle, überschreiten die erstellten Diagramme die Größe ihres Containers erheblich. Überraschenderweise wird die Größe der Diagramme nach einer Größenänderung des Fensters korrekt geändert (d. H. Wennchart.reflow() wird genannt)

So habe ich folgendes ausprobiert, was nicht geholfen hat:

$(element).highcharts({
    chart: {
      type: 'scatter',
      zoomType: 'xy',
      events: {
        load: function () {
          this.reflow();
        }
      }
    },
    ...

Finally, das Folgende hat funktioniert, aber es fühlt sich an wie ein Hack.

$(element).highcharts({
    chart: {
      type: 'scatter',
      zoomType: 'xy',
      events: {
        load: function () {
          var chart = this;
          setTimeout(function () { chart.reflow(); }, 0);
        }
      }
    },
    ...

Ist eine Idee, woher das Problem kommt? Ich verbringe Stunden damit, und das ist ziemlich frustrierend ...

EDIT: Ich habe eine andere verwandte Frage: Standardmäßig haben meine Diagramme eine bestimmte Größe, aber ich habe eine Schaltfläche "Vergrößern", damit sie den gesamten Platz einnehmen. Die Schaltfläche schaltet einfach eine CSS-Klasse um, um dies zu tun. Dies macht jedochnich löst ein Resize-Ereignis aus und löst somit keinen Reflow aus. Ich habe also das gleiche Problem, dass Diagramme ihren Container nicht füllen.

Hier ist eine Geige, um das Problem zu demonstrieren:http: //jsfiddle.net/swaek268/3

Again, ich habe einen Weg gefunden, um das Problem zu umgehen, aber es fühlt sich an wie ein noch größerer Hack.

var width = 0;
var planreflow = function(){
  setTimeout(function(){
      if(width!==$('#container').width()){
          $('#container').highcharts().reflow(); 
          console.log('reflow!')
      }
      width = $('#container').width();
      planreflow();
  }, 10);
};
planreflow();