2

データベースからクエリで取得したエンコードされた JSON データを Angular-nvD3 グラフにロードしたいのですが、その方法や、そのようなタスクを達成するのに最適な方法がわかりません。

API を使用してデータベース (テーブル PRODUCTS) からクエリを使用して、エンコードされた JSON データを取得します。$http指定されたAPIへのリクエスト（ファクトリにロードされた）を使用して、そのようなデータをテーブルに正常にロードしました。$httpデータは、API (サービスにある) への要求とと​​もに、ファクトリのディクショナリにオブジェクトとして保存されます。

テーブルのサンプル (テーブル PRODUCTS):

IDストック

1 100

2 275

工場のサンプル:

.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"}]

PIE CHART - これは、追加したいスクリプトのタイプの例です (このリポジトリから) :

'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 データを Angular-nvD3 グラフにロードする方法を教えて$scope.dataください。

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

4

2 に答える 2

1

データを受け取ったら、データをマッピングするだけです。コメントからプランカーを更新して、lodashを使用してこれを行う方法を示しました。

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

または、lodash を使用したくない場合 (通常は既定で angular アプリケーションに含まれています)、次のようにすることもできます。

$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-13T19:22:54.027 に答える
0

私はあなたが欲しいと思いますd3.json()

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

このコマンドは、任意の JSON ファイルをロードする必要があります。NVD3 を使用しているため、プロジェクトには既に D3 が含まれているはずです。

于 2016-04-11T21:15:36.510 に答える