在角度指令中绘制莫里斯图几乎显示出来

Question

我正在尝试在ng-repeat块内的angular指令中绘制morris图表。这很奇怪，因为它几乎吸引了？我可以看到它在那里，鼠标悬停工作，但图形本身只是顶部的一条细线。有没有人有任何想法？

这是html：

        <div id="page-wrapper" ng-repeat="d in dealerGroup.Dealerships__r" ng-if="expandedDealer == d.Id">
           <div class="panel-heading">Area Chart Example</div>
           <div class="panel-body">
             <area-chart dealership="d" chartData="d.SalesChartData"></area-chart>
            </div>
        </div>

这是指令

angular.module('areaChart', ['ui.bootstrap']).directive('areaChart', function($window) {
var directive = {};
// directive.templateUrl = directivePath + '/charts/area-chart.html';
directive.restrict = 'EA';
directive.scope = {
    dealership: "=",
    chartdata: "="
};

directive.controller = function($scope) {
    $scope.ykeys = function() {
        var ykeys = [];
        angular.forEach($scope.chartdata, function(d,k) {
            angular.forEach(d, function(value,key) {
                if(key != 'period') { ykeys.push(key); }
            })
        });
        return ykeys;
    }
}

directive.link = function($scope,element,attrs) {

    Morris.Area({
        element: element,
        xkey: 'period',
        ykeys: $scope.ykeys(),
        labels: $scope.ykeys(),
        hideHover: 'auto',
        pointSize: 2,
        data: $scope.chartdata
    }); 

}

return directive;

}）;

以下是发生的事情：

此外，调整大小会使整个事情随处可见javascript错误。但我会分开担心