Flot，angularjs并通过http get获取要绘制的数据

Tampa 发表于 Dev

坦帕

哇...。不能使用flask返回json对象以在angularjs中绘制浮点图。

完全不起作用。我使用硬编码的json ...图表显示。angularjs中的get请求如何处理？我转到localhost：5000 / datatest，我看到了json对象。但是角度不会绘制有效的json对象吗？

在烧瓶中..

@app.route('/datatest')
def datatest():
    test1 = [[[0, 1], [1, 5], [2, 2]]]
    data = json.dumps(test1)
    resp = Response(data, status=200, mimetype='application/json')
    return resp

我的控制器和指令。

var App = angular.module('App', []);

App.controller('Ctrl', function ($scope,$http) {

     $http.get('datatest').success(function(data) {
        $scope.data = data;
    });


    //$scope.data = [[[0, 1], [1, 5], [2, 2]]];

});


App.directive('chart', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            var data = scope[attrs.ngModel];
            $.plot(elem, data, {});
            elem.show();
        }
    };
});

我的HTML：

<!DOCTYPE html>
<html>
  <head>

    <script type="text/javascript" src="static/js/jquery/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="static/js/flot/jquery.flot.js"></script>
    <script type="text/javascript" src="static/js/angular/angular.min.js"></script>
    <script type="text/javascript" src="static/lib/flot/controller.js"></script>
    <style type='text/css'>
       chart {
            display:none;
            width:400px;
            height:200px;
        }
   </style>
 </head>
 <body>
    <div ng-app='App'>
        <div ng-controller='Ctrl'>
            <chart ng-model='data'></chart>
        </div>
    </div>    
  </body>
</html>

威特

您的指令$plot在$http完成之前调用data。相反，您可以data在指令中监视数组，并$plot在其更改时调用：

app.directive('chart', function() {
  return {
    restrict: 'E',
    scope: {
      data: '='
    },
    link: function(scope, elem, attrs) {
      scope.$watch('data', function() {
        if (scope.data.length > 0) {
          $.plot(elem, scope.data, {});
          elem.show();
        }
      })
    }
  };
});

的HTML： <chart data='data'></chart>

这是一个演示：http : //plnkr.co/7nx2Xf5i1OfLEkzMdwNm

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。