Highchart не изменяется, когда скрытый

Question

Я это AngularJS демонстрационное приложение с помощью Highcharts: http://jsfiddle.net/dennismadsen/dpw8b8vv/1/

<div ng-app="myapp"> 
    <div ng-controller="myctrl"> 
     <button ng-click="hideView()">1. Hide</button> 
     <button ng-click="showView()">2. Show</button> 
     <div id="container" ng-show="show"> 
      <highchart id="chart1" config="highchartsNG"></highchart> 
     </div> 
    </div> 
</div> 

При изменении ширины зрения результата в JSFiddle, то Highchart автоматически изменяет размер его ширины к размеру контейнер (div с черной рамкой).

Я заметил, что если Highchart скрыта, и изменении размеров окна, оно не изменяется автоматически (например, IPad меняющегося ландшафта/книжной ориентации). Попробуйте это, предварительно нажимая кнопку «1. hide», измените размер представления результата и нажмите кнопку «2. показать». Смотрите этот пример:

Как я могу заставить highchart изменить размер, даже если это не видно?

Answer 1

В соответствии с документацией нам необходимо вызвать метод reflow в сценариях, где событие изменения размера не может быть записано графиком.

Triggering reflow метод в $timeout отобразит диаграмму правильно.

$scope.showView = function() { 
     $scope.show = true; 
     $timeout(function() { 
      $scope.highchartsNG.getHighcharts().reflow() 
     }); 
    } 

Working Fiddle

Answer 2

Я думаю, что это правильное поведение.

Но учитывая, что событие событие изменения размера зафиксировать размер графика, вы можете вызвать изменение размеров после того, как граф показано, как:

setTimeout(function() { 
    $(window).trigger('resize'); 
}, 1); 

Это путь JQuery, я думаю, что есть угловой, но я Он не знаком с этим.