JSON Verisini Angular-nvD3 Grafiğine Yüklemek (AngularJS)

Question

Veritabanından gelen sorgularla alınan kodlanmış JSON Verisini Angular-nvD3 grafiğe yüklemek istiyorum ancak nasıl yapılacağını bilmiyorum veya hangisi en iyisi böyle bir görevi yerine getirmek.

Kodlanmış JSON verilerini bir api ile bir veritabanından (tablo PRODUCTS) gelen sorgularla alıyorum. Bu verileri, verilen api'ye $http istekleri (bir fabrikaya yüklenmiş) ile tablolara başarıyla yükledim. Veriler, bir fabrikada sözlükte $http istekleri (hizmetlerde bulunur) istekleri ile kaydedilir.

tablonun örnek (Tablo ÜRÜNLER):

İD STOK

fabrikanın Örnek:

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

bir kontrolörün 363.210

örnek ("ng-repeat="data in get_data"" görünümünde olan) bir tabloya verileri görüntülemek için: veri formatının

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

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

}]); 

Örnek:

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

pasta grafik - Bu, (deposundan) adempt yapmak istediğim komut dosyasının bir örneğidir:

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

Sorum şudur: $scope.data içine verileri manuel yazmak yerine bir Eğik-nvD3 grafiğinin içine böyle kodlanmış alınan JSON verilerini yüklemek için nasıl mümkün olduğunu?

Çok teşekkür ederim!

Answer 1

Tek yapmanız gereken veriyi aldıktan sonra haritalamaktır. Yorumumdan, updated the plunker yorumunu kullanarak, bunu lodash kullanarak nasıl yapabileceğinizi göstereceğim.senin json verileri bir biçimde ise

$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

Ben herhangi JSON dosyasını yüklemek gerekir d3.json()

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

Bu komut istediğini düşünüyorum. NVD3'ü kullandığınızdan projenizde zaten D3 olmalıdır.