2016-07-19 7 views
0

Morrisグラフを使用していますが、グラフが表示されないという問題に直面しています。Morrisグラフが表示されず、ウィンドウのサイズ変更時にのみ表示されます

コードは以下の通りである:

HTMLページ

 <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 

角度のjsファイル

アイコンをクリックは、折れ線グラフ要素が示されているが、グラフはshown.Only示されていない
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); 



     } 
    } 


}) 

ウィンドウのサイズを変更するとき。

答えて

0

私は同じ問題を抱えていた= "折れ線グラフ" NG-場合の代わりに、NG-ショー= "折れ線グラフ"

+0

Yes..Answerがright.my問題である

使用が解決されています。 – User101

+0

ng-ifを使用すると、半分のグラフが表示され、ズームインまたはズームアウトするとフルグラフが表示されます。 – User101

+0

ボタンのクリックイベントに基づいてグラフを読み込んでいる場合は、古いグラフを最初にクリアしてください。 –

関連する問題