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 回答
这对我有用,在KendoWindow调整大小时重新绘制图表 .
plunk