如何在 KendoUI/Angular Window 上调整 Highcharts 图表的大小

Question

In this plunk AngularJS 上有一个包含 Highchart 的 KendoWindow。如果您调整 window 的大小，图表不会调整大小以适应。Highchart 元素 jQuery 包裹在指令中。

通过将 Highchart 容器设置为样式 height:100%;width:100%;position:absolute，这在纯 Jquery 中有效。 Angular 在 KendoWindow 和容器之间有更多的 div，这可能就是问题所在。

有什么想法吗？

HTML:

<div kendo-window="win" style="width:600px;height:400px">
  <div dir-highcharts render="render"></div>
</div>

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;

});

Answer 1

这对我有用，在调整 KendoWindow 大小时重新绘制图表。

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

plunk

如何在 KendoUI/Angular Window 上调整 Highcharts 图表的大小

How to resize Highcharts chart on KendoUI/Angular Window resize

angularjs

highcharts

kendo-ui