Highchart 隐藏时不调整大小

Question

我使用 Highcharts 制作了这个 AngularJS 演示应用程序： 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，并且调整了 window 的大小，它不会自动调整大小（就像 iPad 改变 Landscape/Portrait 方向）。首先点击“1. 隐藏”按钮，更改结果视图的大小，然后按“2. 显示”按钮来试试这个。看这个例子：

即使高图不可见，我如何强制调整其大小？

Answer 1

我认为这是正确的行为。

但是考虑到resize事件事件固定了图的大小，可以在图显示后触发resize，比如：

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

是jQuery的方式，我想也有angular的方式，但我不熟悉。

Answer 2

根据文档，我们需要在图表无法捕获调整大小事件的情况下触发reflow方法。

触发 $timeout 中的 reflow 方法将正确呈现图表。

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

Working Fiddle

Highchart 隐藏时不调整大小

Highchart not resized when hidden

css

angularjs

highcharts