Angularjs 如何在KendoUI/Angular窗口上调整Highcharts图表的大小调整大小

AngularJS上有一个KendoWindow，里面有一个海图。如果调整窗口大小，图表不会调整大小以适应。Highchart元素被jQuery包装在一个指令中

这在纯Jquery中工作，通过将Highchart容器设置为样式

height:100%；宽度：100%；位置：绝对

。使用Angular时，KendoWindow和容器之间有更多的div，这可能就是问题所在

有什么想法吗

HTML:

Javascript

var app = angular.module("app", [ "kendo.directives" ]);

function MyCtrl($scope) {

    $scope.render = 0;

        $scope.$on("kendoWidgetCreated", function(event, widget){
          if (widget === $scope.win) {
              $scope.render++;  // add 1 to render the chart when the window is created
          }
      });

}


app.directive("dirHighcharts", function() {

    var directive = {};

    directive.replace = true;

    directive.restrict = 'AE';

    directive.scope = {
                     render: '='
                  };

    directive.template = '<div id="container" style="height:100%;width:100%;position:absolute;"></div>';


    directive.link = function (scope, element, attrs) { 

            scope.$watch('render', function(newValue,oldValue) {
                if ( newValue != oldValue ) {
                    renderChart();
                }
             });


        var renderChart = function() {
            var settings = {             
                    chart: {
                    renderTo: 'container',
                    type: 'line'
                }
                ,xAxis: {
                  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
               },
              series: [{
                      name: 'Tokyo',
                      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                  }, {
                      name: 'London',
                      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
               }]
            };

            scope.chart = new Highcharts.Chart(settings);

        };
    };

    return directive;

});

var-app=angular.module（“app”、[“kendo.directives”]）；
函数MyCtrl（$scope）{
$scope.render=0；
$scope.$on（“kendoWidgetCreated”，函数（事件，小部件）{
if（widget==$scope.win）{
$scope.render++；//添加1以在创建窗口时呈现图表
}
});
}
应用指令（“dirHighcharts”，函数（）{
var指令={}；
directive.replace=true；
directive.restrict='AE'；
指令范围={
渲染：'='
};
指令.template=''；
directive.link=函数（范围、元素、属性）{
作用域：$watch（'render'，函数（newValue，oldValue）{
如果（新值！=旧值）{
renderChart（）；
}
});
var renderChart=函数（）{
变量设置={
图表：{
renderTo:'容器'，
类型：“行”
}
，xAxis：{
类别：[‘一月’、‘二月’、‘三月’、‘四月’、‘五月’、‘六月’，
‘七月’、‘八月’、‘九月’、‘十月’、‘十一月’、‘十二月’]
},
系列：[{
名称:"东京",，
数据：[7.0,6.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6]
}, {
名称：“伦敦”，
数据：[3.9,4.2,5.7,8.5,11.9,15.2,17.0,16.6,14.2,10.3,6.6,4.8]
}]
};
scope.chart=新的Highcharts.chart（设置）；
};
};
返回指令；
});

这对我来说很有效，在调整KendoWindow的大小时重新绘制图表

    $scope.options = {
            resize: function() {
                $scope.render++;
                $scope.$apply();
            }
        };

---

开始时，删除重复的文件（highcharts.js和highcharts.src.js是相同的，但其中一个（第一个）仅被缩小）。其次，将容器的宽度设置为600px的百分比。请看，当我将宽度从600px更改为100%时，会发生这种情况。请注意，该指令有一个内部div，样式

height:100%；宽度：100%；位置：绝对

我发现了一些有趣的东西；在chrome中打开上面的链接，放大窗口（图表将不会展开以适应），然后按F12（开发人员工具），图表将展开。我需要做的是像F12一样重新绘制。

    $scope.options = {
            resize: function() {
                $scope.render++;
                $scope.$apply();
            }
        };