将JSON数据加载到Angular-nvD3图表（AngularJS） [英] Load JSON Data into Angular-nvD3 Graph (AngularJS)

问题描述

我想将从数据库查询中检索到的编码JSON数据加载到Angular-nvD3图表中，但我不知道如何去做，或者哪​​种方式最适合完成此类任务。

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

$ b $ p> 1 100

<2> 275

工厂样本

  .factory（'services'，['$ http'，function（$ http）{
 var serviceBase ='services /'
 var object = {}; 
 object.getData = function（）{
 return $ http.get（serviceBase +'data'）; 
}; 
返回对象; 
}]）; 
  

将数据显示到表格中的控制器示例（带 ng-repeat =data in get_data）： c> .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}] 
  

PIE CHART - 这是我想要添加的脚本类型的示例（来自

 <$ c $ '使用严格'; 
 
。angular.module（'mainApp.controllers'）
 
 .controller（'pieChartCtrl'，函数（$ scope）{
 
 $ scope。 options = {
 chart：{
 type：'pieChart'，
 height：500，
x：function（d）{return d.key;}，
y：函数（d）{return dy;}，
 showLabels：true，
 duration：500，
 labelThreshold：0.01，
 labelSunbeamLayout：true，
 legend：{
保证金：{
 top：5，
 right：35，
 bottom：5，
 left：0 
} 
} 
 
 $; 
 
 $ scope.data = [
 {
键：One，
y：5 
}，
 {
 key：Two，
y：2 
}，
 {
键：Three，
 y：9 
}，
 {
 key：Four，
y：7 
}，
 {
 key：Five ，
y：4 
}，
 {
 key：Six，
y：3 
}，
 {
 key ：七，
y：.5 
} 
]; 
}）; 
  

HTML：

 < div ng-app =myApp> 
< div ng-controller =pieChartCtrl> 
 < / div> 
< / div> 
  

我的问题是：如何将这样获取的编码JSON数据加载到Angular-nvD3图表中而不是手动输入数据到 $ scope.data ？

非常感谢！

解决方案

一旦你收到它，就会映射你的数据。我从我的评论中更新了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 
}）; 
}）; 
}）; 
  

I want to load encoded JSON Data retrieved with queries from a database into an Angular-nvD3 graph but I don't know how to do it or which way is the best to accomplish such task.

I retrieve encoded JSON data with queries from a database (table PRODUCTS) with an api. I have already successfully loaded such data into tables with $http requests (loaded into a factory) to the given api. The data is saved as an object into a dictionary in a factory with $http requests to the api (located in services).

Sample of the table (table PRODUCTS):

ID STOCK

1 100

2 275

Sample of the factory:

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

Sample of a controller to display the data into a table (with "ng-repeat="data in get_data"" in the view):

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

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

}]);

Sample of the data format:

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

PIE CHART - This is an example of the type of script I want to addapt (from THIS repository):

'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>

My question is: how it is possible to load such retrieved encoded JSON data into an Angular-nvD3 graph instead of typing manually the data into $scope.data?

Thank you very much!

解决方案

All you have to do is map your data once you receive it. I updated the plunker from my comment to show you how you might do this using lodash.

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

Alternatively, if you don't want to use lodash (though it's usually included in angular applications by default), you could do something like:

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

这篇关于将JSON数据加载到Angular-nvD3图表（AngularJS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！