我使用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,并且调整了窗口大小,则不会自动调整大小(例如iPad更改横向/纵向方向)。首先通过陈述&#34; 1来试试这个。隐藏&#34;按钮,更改结果视图的大小,然后按&#34; 2。显示&#34;按钮。见这个例子:
即使它不可见,如何强制高图调整大小?
答案 0 :(得分:3)
根据文档,我们需要在图表无法捕获resize事件的情况下触发reflow
方法。
在reflow
中触发$timeout
方法将正确呈现图表。
$scope.showView = function () {
$scope.show = true;
$timeout(function () {
$scope.highchartsNG.getHighcharts().reflow()
});
}
答案 1 :(得分:2)
我认为这是正确的行为。
但考虑到调整大小事件事件会修复图形大小,您可以在显示图形后触发调整大小,如:
setTimeout(function () {
$(window).trigger('resize');
}, 1);
这是jQuery方式,我认为它也有角度,但我不熟悉它。