莫里斯图表具有角和动态数据

我需要一个面积图使用角度指令和数据是从数据库中获取，但问题是获取数据后，图表不会出现并且当我使用静态数据图表显示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

莫里斯图表具有角和动态数据

回答

相关问题