将JSON数据加载到Angular-nvD3图表中（AngularJS）

我想将从数据库查询检索到的编码JSON数据加载到Angular-nvD3图表中，但我不知道如何去做，或者哪种方式是最好的完成这样的任务。将JSON数据加载到Angular-nvD3图表中（AngularJS）

我使用api从数据库（表PRODUCTS）检索编码的JSON数据。我已经成功地将这些数据加载到$http请求（加载到工厂中）到给定api的表中。数据将作为对象保存到工厂的字典中，请求API（$http）（位于服务中）。

表中的样品（表PRODUCTS）：

ID STOCK

工厂的样品：

.factory('services', ['$http', function($http){ 
    var serviceBase = 'services/' 
    var object = {}; 
    object.getData = function(){ 
    return $http.get(serviceBase + 'data'); 
    }; 
    return object; 
}]);

样品的控制器的显示数据到一个表（用 “ng-repeat="data in get_data"” 的视图）：

.controller('TablesCtrl', ['$scope', 'services', function($scope, services) { 

    services.getData().then(function(data){ 
    $scope.get_data = data.data; 
    }); 

}]);

样本的数据格式的：

[{"0":"1","1":"100","ID":"1","STOCK":"100"},{"0":"2","1":"275","ID":"2","STOCK":"275"}]

饼图 - 这是我想要添加的脚本类型的示例（来自THIS存储库）：

'use strict'; 

angular.module('mainApp.controllers') 

.controller('pieChartCtrl', function($scope){ 

    $scope.options = { 
     chart: { 
      type: 'pieChart', 
      height: 500, 
      x: function(d){return d.key;}, 
      y: function(d){return d.y;}, 
      showLabels: true, 
      duration: 500, 
      labelThreshold: 0.01, 
      labelSunbeamLayout: true, 
      legend: { 
       margin: { 
        top: 5, 
        right: 35, 
        bottom: 5, 
        left: 0 
       } 
      } 
     } 
    }; 

    $scope.data = [ 
     { 
      key: "One", 
      y: 5 
     }, 
     { 
      key: "Two", 
      y: 2 
     }, 
     { 
      key: "Three", 
      y: 9 
     }, 
     { 
      key: "Four", 
      y: 7 
     }, 
     { 
      key: "Five", 
      y: 4 
     }, 
     { 
      key: "Six", 
      y: 3 
     }, 
     { 
      key: "Seven", 
      y: .5 
     } 
    ]; 
});

HTML：

<div ng-app="myApp"> 
    <div ng-controller="pieChartCtrl"> 
     <nvd3 options="options" data="data"></nvd3> 
    </div> 
</div>

我的问题是：它是如何可能加载这样检索到的编码数据JSON成角nvD3图形代替数据手动键入到$scope.data的？

非常感谢！

来源

2016-04-11 Ariana

如果你的JSON数据的格式你可以直接插入图表，那么你在那里有什么工作。它只是'services.getData（）。then（function（data）{scopedata = data.data; }）;'。否则，您可能需要将数据按摩到图表所期望的结构中。 –

[请参阅此plunker]（http://plnkr.co/edit/QWFunjULS325rMAPcXNW?p=preview）。 –

我认为我无法直接将数据插入图表。我的问题是如何将数据按照图表所期望的结构进行按摩？例如，有两个查询：一个对象带有“键”，另一个带有“y”（值）？两种都采用JSON格式。 – Ariana

所有你需要做的就是一旦你收到数据就映射你的数据。我从我的评论中找到了updated the plunker，告诉你如何使用lodash来做到这一点。

services.getData().then(function successCb(data) { 
    $scope.data = _.map(data.data, function(prod) { 
    return { 
     key: prod.ID, 
     y: prod.STOCK 
    }; 
    }); 
});

另外，如果你不想使用lodash（尽管它通常包含在默认情况下角的应用程序），你可以这样做：

$scope.data = []; 
services.getData().then(function successCb(data) { 
    angular.forEach(data.data, function(prod) { 
    $scope.data.push({ 
     key: prod.ID, 
     y: prod.STOCK 
    }); 
    }); 
});

来源

2016-04-13 19:22:54

谢谢你先生！它的工作完美:) – Ariana

@Ariana，[我再次更新plunker]（http://plnkr.co/edit/S4pH7yjLzPOccYOEiG7m?p=preview）与创建条形图兼容数据的方法。 –

哦，谢谢你，但同时我创建了我自己的方法（与你的方法类似）。但是，这对其他人可能非常有用！谢谢你为我做的一切：） – Ariana

我想你想d3.json()

https://github.com/mbostock/d3/wiki/Requests

这个命令应该加载任何JSON文件。由于您使用的是NVD3，因此您的项目中应该已经有了D3。

来源

2016-04-11 21:15:36

我不想加载JSON文件。我想用查询加载直接从数据库检索的JSON数据。数据作为一个对象保存到工厂的字典中，并向api发出$ http请求。 – Ariana

将JSON数据加载到Angular-nvD3图表中（AngularJS）

回答

相关问题