2017-08-08 2 views
0

AngularJSおよびd3の新機能です。私はこの例を使用しました:http://embed.plnkr.co/6t5bky/ そして 'bulletChart'を作成しようとしました。私は(コードにコメント)などの値を返すとき、それは動作しますnvD3サービスが返されないAngularJS

var app = angular.module('plunker', ['nvd3']); 
app.controller('MainCtrl', function($scope, $http) { 
    $scope.options = { 
      chart: { 
       type: 'bulletChart', 
       transitionDuration: 500, 
      } 
     }; 

     $scope.data = populateData(); 

     function populateData(){ 

      /*return { 
      "title": "Test Title", 
      "subtitle": "Completed", 
      "ranges": [200,400,700], 
      "measures": [600], 
      "markers": [300] 
      }*/ 

      return $http.get('http://myservice/data').then(function(response) { 
        console.log('response-dataNew',response.data); 
        return response; 
        ;}) 

       } 

}); 

私のjavascriptのファイルは、以下のようになります。私はそれは私に何のグラフを与えないサービスを使用しようとすると

enter image description here

return { 
      "title": "Test Title", 
      "subtitle": "Completed", 
      "ranges": [200,400,700], 
      "measures": [600], 
      "markers": [300] 
      } 

は、私はbulletGraphを参照してください。マイサービス(http://myservice/dataは)まったく同じ形式でデータを返している:

enter image description here

enter image description here

私はここで間違って何をしているのですか?すべてのポインタ?

+2

あなたのサービス成功コールバックで$ scope.dataを '$ scope.data = response.data'と設定してみてください。 –

+2

$ http.getは約束を返していませんか?その場合、populatedataは未解決の約束を返しますが、要求からのデータは返しません。 – StackOverMySoul

+1

は、 '$ http'が約束を返すので、問題が' return $ http'であると信じています。返り値を取り除いたり、レスポンスデータを '$ scope'変数'にバインドしてみましょう。.then(function(response){$ scope.someVariable = angular.copy(response.data);}); ' –

答えて

0

すべてのコメントに続いて、この解決策は私のために働いた。

var app = angular.module('plunker', ['nvd3']); 
app.controller('MainCtrl', function($scope, $http) { 
    $scope.options = { 
      chart: { 
       type: 'bulletChart', 
       transitionDuration: 500, 
      } 
     }; 

     $scope.data = populateData(); 
     function populateData(){ 

      $http.get('http://10.20.26.90:5003/bullet').then(function(response) { 
        console.log('response-dataFound',response.data); 
        $scope.data = angular.copy(response.data); 
        ;}) 

       } 

}); 

あなたがより良いアプローチを考えているかどうか教えてください。

関連する問題