莫里斯圖表具有角和動態數據

我需要一個面積圖使用角度指令和數據是從數據庫中獲取，但問題是獲取數據後，圖表不會出現並且當我使用靜態數據圖表顯示fine.And圖表將在10秒後更新，這是我的要求。莫里斯圖表具有角和動態數據

var myapp=angular.module('myapp',['ngRoute']); 
     myapp.controller('GraphController', 
     function(dataFactory,$scope,$http,$timeout){ 

      var getData=function() { 
       dataFactory.httpRequest('/graph').then(function (data) { 
        console.log(JSON.stringify(data)); 
        $scope.myModel=JSON.stringify(data); 

        $timeout(getData, 1000); 

       }); 

      } 
      $scope.xkey = 'id'; 
      $scope.ykeys = ['id',  'value']; 
      $scope.labels = ['ID', 'Value']; 
      $timeout(getData, 1000); 


      /* Static data and when these static data are use in getData function ,it didnot work. 
      $scope.myModel = [ 
         {"id":21,"yr":2000,"value":80}, 
         {"id":1,"yr":2001,"value":5}, 
         {"id":2,"yr":2002,"value":6}, 
         {"id":3,"yr":2003,"value":17}, 
         {"id":4,"yr":2004,"value":5}, 
         {"id":5,"yr":2005,"value":22},{"id":7,"yr":2006,"value":41}, 
         {"id":9,"yr":2007,"value":11},{"id":10,"yr":2008,"value":33}, 
         {"id":8,"yr":2009,"value":77},{"id":6,"yr":2010,"value":55}, 
         {"id":11,"yr":2011,"value":55},{"id":12,"yr":2012,"value":66}, 
         {"id":13,"yr":2013,"value":77},{"id":14,"yr":2014,"value":50}, 
         {"id":15,"yr":2015,"value":22},{"id":16,"yr":2016,"value":77}, 
         {"id":17,"yr":2017,"value":41},{"id":18,"yr":2018,"value":20}, 
         {"id":19,"yr":2019,"value":9},{"id":20,"yr":2020,"value":2}, 
         {"id":23,"yr":2022,"value":1} 
        ];*/ 


     }); 

     myapp.directive('areachart',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]; 
        Morris.Area({ 
         element:element,//element means id # 
         data:data, 
         xkey:xkey, 
         ykeys:ykeys, 
         labels:labels, 
         parseTime: false, 
         ymax:120,//Max. bound for Y-values 
         lineColors: ['#0b62a4', '#D58665'],//Array containing colors for the series lines/points. 
         smooth: true,//Set to false to disable line smoothing. 
         hideHover: 'auto',//Set to false to always show a hover legend. 
         pointSize: 4,//Diameter of the series points, in pixels.s 
         axes:true,//Set to false to disable drawing the x and y axes. 
         resize: true,//Set to true to enable automatic resizing when the containing element resizes 
         fillOpacity:1.0,//Change the opacity of the area fill colour. Accepts values between 0.0 (for completely transparent) and 1.0 (for completely opaque). 
         grid:true,//Set to false to disable drawing the horizontal grid lines. 

        }); 
       } 
      } 
     })

HTML頁面

<body ng-app="myapp"> 
     <div ng-controller="GraphController"> 
      <AreaChart xkey="xkey" ykeys="ykeys" labels="labels" data="myModel"></AreaChart> 
     </div> 
</body>

來源

2016-04-21 User101

而在HTTP請求的數據工廠file.Response沒有問題，是工作和響應格式爲[對象，對象，等等]和後JSON.stringify（數據）數據的功能格式是：[ { 「ID」：21，「年」：2000，「值」：80}，{ 「ID」：1，「年」：2001 ，「value」：5}， {「id」：2，「yr」：2002，「value」：6}， {「id」：3，「yr」：2003，「value」：17}，等等]; – User101

-1

試試這個$scope.myModel=JSON.parse(data); insted的的$scope.myModel=JSON.stringify(data);

來源

2016-04-21 20:45:34

我用它，但解決了這個問題。 – User101

如果我替換$ scope.myModel = JSON.stringify（數據）$ scope.myModel = [{ 「ID」：21，「年」：2000，「值」：80}，{ 「ID」：1 「年」：2001，「值」：5}， { 「ID」：2 「年」：2002，「值」：6}， { 「ID」：3 「年」：2003，」值「：17}，等等];它不工作.. – User101

莫里斯圖表具有角和動態數據

回答

相關問題