Laden von JSON-Daten in Angular-nvD3-Graphen (AngularJS)

Question

Ich möchte codierte JSON-Daten, die mit Abfragen aus einer Datenbank abgerufen wurden, in einen Angular-nvD3-Graphen laden, aber ich weiß nicht, wie oder wie es am besten ist eine solche Aufgabe erfüllen.

Ich erhalte codierte JSON-Daten mit Abfragen aus einer Datenbank (Tabelle PRODUKTE) mit einer API. Ich habe solche Daten bereits erfolgreich in Tabellen mit $http Anfragen (in eine Fabrik geladen) auf die angegebene API geladen. Die Daten werden als Objekt in einem Verzeichnis in einer Fabrik mit $http Anfragen an die API (in Diensten) gespeichert.

Probe der Tabelle (Tabelle PRODUCTS):

ID STOCK

Probe der Fabrik:

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

Beispiel einer Steuerung, die Daten in einer Tabelle (mit "ng-repeat="data in get_data"" in der Darstellung) anzuzeigen:

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

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

}]); 

Probe des Datenformats:

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

PIE CHART - Dies ist ein Beispiel für den Skripttyp, den ich hinzufügen möchte (von 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> 

Meine Frage ist: wie es möglich ist, solche abgerufen codierte JSON-Daten in eine Angular-nvD3 Diagramm zu laden, anstatt die Daten manuell in $scope.data einzutippen?

Vielen Dank!

Answer 1

Alles, was Sie tun müssen, ist Ihre Daten abzugleichen, sobald Sie sie erhalten. I updated the plunker von meinem Kommentar, um Ihnen zu zeigen, wie Sie dies mit lodash tun könnten.

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

Alternativ, wenn Sie lodash nicht verwenden wollen (obwohl es in der Regel in Winkeln Anwendungen standardmäßig enthalten ist), könnte man so etwas tun:

$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

Ich glaube, Sie wollen d3.json()

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

Dieser Befehl sollte jede JSON-Datei laden. Da Sie NVD3 verwenden, sollten Sie bereits D3 in Ihrem Projekt haben.