Question

我正在使用ManifestWebDesign angular-gridster 来设计信息中心中的小部件。我正在使用Highcharts来显示小部件上的图表。

我对所有小部件都有大小和最大大小。当我点击窗口小部件的最大化按钮时，我可以调整窗口小部件的大小，但窗口小部件内的图形不会调整大小。虽然当我通过拖动鼠标调整窗口小部件的大小时，窗口小部件和图形会被调整大小。以下是我正在使用的代码 -

ctrl.gridsterOptions = {
            margins: [10, 10],
            columns: 50,
            width: 'auto',
            resizable: {
                enabled: true,
                handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'],
                start: function(event, $element, widget) {

                },
                resize: function(event, $element, widget) {

                },
                stop: function(event, $element, widget) {
                    ctrl.resizeGraph(widget);                   
                    $scope.isMaximized = false;
                }
             },
             draggable: {
                enabled: true,
                handle: '.widgetHeader',
                start: function(event, $element, widget) {
                },
                drag: function(event, $element, widget) {
                },
                stop: function(event, $element, widget) {
                }
             }
    };


   ctrl.resizeGraph = function(_widget) {
        for(var a = 0; a < Highcharts.charts.length; a++) {
              Highcharts.charts[a].reflow();
         }
   };

   ctrl.maximizeWidget = function(_widget) {
        $scope.isMaximized = true;
        _widget.col = 0;
        _widget.sizeX = _widget.maxSizeX;
        _widget.sizeY = _widget.maxSizeY;

        ctrl.resizeGraph(_widget);
    };

    ctrl.restoreWidget = function(_widget) {
        $scope.isMaximized = false;
        _widget.sizeX = _widget.minSizeX;
        _widget.sizeY = _widget.minSizeY;

        ctrl.resizeGraph(_widget);
    };

我认为问题出在事件上，同时最大化窗口小部件我会手动调整窗口大小，因此不会触发事件，因此我尝试使用$(window).trigger('resize');，但图表仍未调整大小。

如何在最大化窗口小部件的同时手动调整高图图形？

编辑 - 已解决

我可以使用 setSize 方法调整图表大小超时

setTimeout(function(){ 
            var _widgetHeight = $(widgetId).height();
            var _widgetWidth = $(widgetId).width();

            _chart.setSize(_widgetWidth - 20, _widgetHeight);
        }, 500);

希望这对其他人也有帮助。感谢

如何在最大化Gridster小部件的同时手动调整Highchart Graph的大小？

0 个答案: