Мое приложение отображает диаграммы HighCharts на различных вкладках (используя AngularJS). Обратите внимание, что графики воссоздаются на летукаждый раз, когда вкладка выбрана (Это означает, что Angular «удаляет или воссоздает часть дерева DOM» каждый раз).

Моя проблема в том, что размер графика правильныйтолько в первый раз Я нажимаю на вкладку. Когда я переключаю вкладки, созданные диаграммы в значительной степени превышают размер их контейнера. Удивительно, но диаграммы корректно изменяются после изменения размера окна (т.е. когдаchart.reflow() называется).

Поэтому я попробовал следующее, которое не помогло:

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

Наконец, следующее сработало, но это похоже на взлом.

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

Есть идеи, откуда возникла проблема? Я трачу на это часы, и это довольно неприятно ...

РЕДАКТИРОВАТЬ: У меня есть еще один связанный вопрос: по умолчанию мои диаграммы имеют заданный размер, но у меня есть кнопка «увеличить», чтобы они занимали все пространство. Кнопка просто переключает класс CSS, чтобы сделать это. Тем не менее, это делаетне вызвать событие изменения размера, и поэтому не запускает перекомпоновку. Поэтому у меня та же проблема с графиками, не заполняющими их контейнер.

Вот скрипка, чтобы продемонстрировать проблему:http://jsfiddle.net/swaek268/3/

Опять же, я нашел способ обойти проблему, но это похоже на еще больший взлом.

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