Morris-Grafik wird nicht angezeigt und nur bei der Größenanpassung des Fensters angezeigt

Question

Ich benutze Morris-Grafik und ich bin mit dem Problem konfrontiert, dass das Diagramm nicht angezeigt wird, wird nur angezeigt, wenn das Fenster wie Zoom vergrößern oder verkleinern.

-Code ist unten angegeben:

Html Seite

 <div class="content" ng-controller="SuperUserController"> 

     <LineChart xkey="xkey" ykeys="ykeys" labels="labels" ng-show="lineChart" ></LineChart> 
    <i class="fa fa-area-chart" ng-click="graphSet(1)"></i> 

</div 

Angular js Datei

myapp.controller('SuperUserController',function(dataFactory,Flash,$scope,$http){ 
    $scope.graph=true; 
    $scope.lineChart = false; 

    $scope.xkey = 'xAxis'; 
    $scope.ykeys = ['yAxis']; 
    $scope.labels = ['unit']; 
    $scope.myModel = []; 

    $scope.graphSet=function($id) { 
     $scope.deviceId=$id; 
     dataFactory.httpRequest('/graph/yesterday/' + $id).then(function (data) { 
      if (Object.keys(data).length !== 0) { 
       $scope.graph = true; 
       $scope.lineChart = true; 

       $scope.myModel = data; 
     } 

    }); 

    } 
myapp.directive('linechart',function(){ //directive name must be in small letters 

    return { 
     // required to make it work as an element 
     restrict: 'E', 
     template: '<div></div>', 
     replace: true, 
     link:function($scope,element,attrs) 
     { 

      var data = $scope[attrs.data], 
       xkey = $scope[attrs.xkey], 
       ykeys = $scope[attrs.ykeys], 
       labels = $scope[attrs.labels]; 
      $scope.$watch("myModel", function (newValue) { 
       data = newValue; 
       console.log(newValue); 

       Linechart.setData(newValue); 

      }); 
      config = { 
       element: element,//element means id # 
       data: data, 
       xkey: xkey, 
       ykeys: ykeys, 

       labels: labels, 
       parseTime: false, 
       pointFillColors: ['#D58665'], 
       lineColors: ['#0b62a4'], 
       smooth: true, 
       hideHover: 'auto', 
       pointSize: 4, 
       axes: true, 
       resize: true, 
       fillOpacity: 1.0, 
       grid: true, 

      } 


       Linechart = Morris.Line(config); 



     } 
    } 


}) 

Wenn Sie auf das Symbol der Linechart Element dargestellt ist, aber Graph nicht shown.Only gezeigt wenn die Größe des Fensters geändert wird.

Answer 1

hatte ich das gleiche Problem

Verwendung ng-if = "Liniendiagramm" statt ng-show = "Linechart"