Angular-nvD3グラフ（AngularJS）にJSONデータを読み込み

Question

エンコードされたJSONデータをデータベースから検索してAngular-nvD3グラフに読み込みたいのですが、どのように行うのか、どちらの方法が最適なのかわかりませんそのような仕事を達成する。

私は、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"}] 

円グラフ - これは、私がaddaptしたいスクリプトのタイプの例です（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> 

私の質問です：それは$scope.dataに手動でデータを入力する代わりにアンギュラnvD3のグラフに、このようなエンコード取り出されたJSONデータをロードすることが可能ですか？

ありがとうございました！

Answer 1

あなたがしなければならないのは、受け取ったデータをマップすることだけです。私はupdated the plunker私のコメントからあなたがこれを行う方法を示すためにlodashを使用します。あなたのJSONデータ形式である場合

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

Answer 2

私はあなたがこのコマンドは、任意のJSONファイルをロードする必要がありd3.json()

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

をしたいと思います。 NVD3を使用しているので、すでにプロジェクトにD3があるはずです。