首页 文章

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

提问于
浏览
0

In this plunk有's a KendoWindow on AngularJS that contains a Highchart. If you resize the window, the chart doesn' t调整大小以适应.Highchart元素是jQuery包装在一个指令中 .

这通过使用样式 height:100%;width:100%;position:absolute 设置Highchart容器在纯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;

});

1 回答

  • 0

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

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

    plunk

相关问题