Question

我需要在标签中调整图表大小。任何人都可以告诉我如何以角度做到这一点？当我第一次加载时，我的图形没有显示，除非我移动窗口并调整它的大小..我第一次需要加载图形并填充div ...

My directive:

    (function() {
    var app = angular.module('dashboard.view', []);

    app.directive('dygraph', function(){
        return {
            restrict: 'E',
            scope: {
                data    : '=',
                options : '=?'
            },
            template: '<div style="width: 100%"></div>',
            link: function (scope, elem, attrs) {
                scope.options.width = elem.parent()[0].offsetWidth;
                var graph = new Dygraph(elem.children()[0], scope.data, scope.options);
                /*if(scope.options.title=="Scanning" || scope.options.title=="Bytes" || scope.options.title=="Pakets"){
                    graph.ready(function(){
                        var width = this.graphDiv.clientWidth;
                        if(width==0)
                            width=1129;
                            graph.resize(width,320);
                    });
                }*/

            }        
        };
    });

    app.directive('resize', ['$window', function ($window) {
            return {
            link: link,
            restrict: 'E',
            template: '<div>window size: {{width}}px</div>'
         };

        function link(scope, element, attrs){

            scope.width = $window.innerWidth;

            angular.element($window).bind('resize', function(){

                scope.width = $window.innerWidth;

                // manuall $digest required as resize event
                // is outside of angular
                scope.$digest();
            });

        }

    }]);

})();

我的问题是，当我转到另一个标签时，它会自动调整图表的大小。如果我按 F12 它会出现，但是如果我只是加载标签，我的图表的宽度为=。

对于标签摘要和探测如果在第一次加载图形实例时我没有使用图形就绪。但是我无法确定宽度和高度......我需要动态值，否则我就是这样做：

  if(scope.options.title=="Scanning" || scope.options.title=="Bytes" || scope.options.title=="Pakets"){
                            graph.ready(function(){
                                var width = this.graphDiv.clientWidth;
                                if(width==0)
                                    width=1129;
                                    graph.resize(width,320);
                            });
                        }

Answer 1

我认为这是Dygraph中的已知问题。因为隐形div而发生，因此无法为其指定宽度。dygraph onload issue

尝试从onload中显示div或尝试在没有任何参数的情况下调用.resize()以在弹出窗口显示时强制重绘。或者onload你可以给出默认的高度，宽度。

类似这样的问题..请看看这个希望这会对你有帮助dygraph1，dygraph2

Answer 2

我解决了这个把控制器放到resize事件的触发器：

$timeout(function () {
   window.dispatchEvent(new Event('resize'));
});

dygraph onload angularjs的resize指令

2 个答案: