首页 文章

隐藏时不会调整Highchart的大小

提问于
浏览 次
3

我使用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） .

enter image description here

我注意到如果隐藏Highchart，并且窗口调整大小，则不会自动调整大小（例如iPad改变横向/纵向方向） . 通过首先打开“1.隐藏”按钮，更改结果视图的大小，然后按“2.显示”按钮来尝试此操作 . 看这个例子：

enter image description here

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

css angularjs highcharts

2 回答

  • 3

    根据文档，我们需要在图表无法捕获resize事件的情况下触发 reflow 方法 .

    触发 $timeout 中的 reflow 方法将正确渲染图表 .

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

    Working Fiddle

    回复于
  • 2

    我认为这是一种正确的行为 .

    但考虑到resize事件事件修复图形大小，您可以在显示图形后触发调整大小，如：

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

    这是jQuery方式，我认为它也有一个角度，但我不熟悉它 .

    回复于

相关问题