在这个小程序中，在AngularJS上有一个KendoWindow，其中包含一个Highchart。如果您调整窗口的大小，则图表也不会调整为适合的大小。Highchart元素是jQuery包装在指令中的元素。
这通过将Highchart容器设置为style在纯Jquery中起作用height:100%;width:100%;position:absolute。有了Angular，KendoWindow和容器之间会有更多的div，这可能就是问题所在。
有任何想法吗？
HTML：
<div kendo-window="win" style="width:600px;height:400px">
<div dir-highcharts render="render"></div>
</div>
Java脚本
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;
});
这对我有用，在调整KendoWindow的大小时重新绘制了图表。
$scope.options = {
resize: function() {
$scope.render++;
$scope.$apply();
}
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句