javascript - AngularJS 选项卡中的 Highcharts 动态(重新)调整大小

Question

我的应用程序在各种选项卡中显示 HighCharts 图表(使用 AngularJS)。请注意，图表会在每次选择选项卡时 即时重新生成(这意味着 Angular 每次都会“删除或重新创建 DOM 树的一部分”)。

我的问题是图表的大小只有在我第一次单击选项卡时是正确的。当我切换选项卡时，创建的图表大大超过了它们容器的大小。令人惊讶的是，在调整窗口大小后(即调用 chart.reflow() 时)图表会正确调整大小。

所以我尝试了以下方法，但没有帮助:

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

最后，下面的代码确实奏效了，但感觉像是 hack。

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

知道问题出在哪里吗？我在这上面花了几个小时，这很令人沮丧......

编辑:我有另一个相关问题:默认情况下，我的图表有一个给定的大小，但我有一个“放大”按钮使它们占据整个空间。该按钮只是切换一个 CSS 类来执行此操作。但是，这样做不会触发调整大小事件，因此不会触发重排。所以我遇到了图表未填满容器的同样问题。

这是一个演示问题的 fiddle : http://jsfiddle.net/swaek268/3/

再次，我找到了解决该问题的方法，但感觉更像是一个更大的 hack。

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

Answer 1

我想我找到了两个问题的解决方案:

1. 图表完成加载时尺寸错误:

问题不是来自Highcharts，而是来自图表创建的时机。我直接从 Angular 指令的 link() 函数调用了 .highcharts()。 JS 看起来基本上是这样的:

app.directive('dynamicView', function() {
  return {
    link: function(scope, element, attrs){
      $(element).highcharts({...});
    },    
  };
});

由于我的元素也有一个 ng-if 指令，具体取决于选项卡是否被选中，我想当该条件变为 true 时，angular 调用 link() 函数在确定元素的尺寸之前(我想 HTML 必须准备好才能确定元素的大小)。所以我认为问题在于我在文档准备好之前调用了 .highcharts()。由于某些我仍然不明白的原因，元素的大小在第一次 ng-if 变为 true 时是正确的，但下一次就不正确了。

无论如何，一个解决方案(仍然不是很优雅 - 但比调用 reflow() 更好)是延迟对 .highcharts() 本身的调用，以确保创建图表时 HTML 已准备就绪:

link: function(scope, element, attrs){
  setTimeout(function () {
    $(element).highcharts({...});
  }, 0);
}

感谢 @Pavel Fus 对 .highcharts() 和 setTimeout() 行为的评论。

1. 切换类时图表不调整大小

对于这个问题，我利用了 Angular 的事件系统。

在我的 Controller 中控制全屏按钮:

$scope.toggleFullScreen = function(e){
  $scope.$broadcast('fullscreen');
}

此事件沿层次结构向下传递，最终到达包含图表的我的指令。在创建图表时，我所要做的就是监听此事件，并相应地触发 reflow():

scope.$on('fullscreen', function(){
  setTimeout(function () { 
    $(element).highcharts().reflow(); 
  }, 0);
});

再次注意，这个技巧只有在我使用 setTimeout() 延迟回流时才有效。不知道为什么。

希望对您有所帮助!花了很多时间在这...