用JSON和角度NVD3

我的HTML代碼工作：從JSON文件用JSON和角度NVD3

在這裏，我檢索字段（key），並在選項中顯示它。無論我從選擇的下拉選項中選擇哪個選項，我都會通過nvd3指令數據選項（data="drawData(data.repeatSelect1)"）將該選項發送到我的角度腳本js文件。

<div ng-controller="chartCtrl"> 

<label for="repeatSelect1"> Field 1: </label> 
<select name="repeatSelect1" id="repeatSelect1" ng-model="data.repeatSelect1"> 
    <option ng-repeat="(key, val) in jsondata[0]">{{key}}</option> 
</select> 
<br /> 
<strong>Selected Field:</strong> {{data.repeatSelect1}}<br /> 
    <div class="col-md-6"> 
     <div class="well well-lg"> 
       <h2><kbd>Chart 1</kbd></h2> 
       <nvd3-pie-chart 
         data="drawData(data.repeatSelect1)" 
         showLabels="true" 
         labelType="percent" 
         showValues="false" 
         tooltips="true" 
         x="xFunction()" 
         y="yFunction()" 
         donut="true" 
         donutRatio=".5" 
         labelThreshold = "0.05" 
         showLegend="true" 
         donutLabelsOutside="false" 
         transitionDuration = "500"> 
       </nvd3-pie-chart> 
      </div> 
     </div> 
    </div>

這裏是我的角度腳本代碼：

angular.module('myapp').factory("test",['$http',function($http){ 
    var obj = {}; 

    obj.fetchdata=function(){ 
     return $http.get('http://localhost:8080/data/my_json_file.json'); 
    } 

    return obj; 
}]) .controller('chartCtrl',function($scope,test){ 
     test.fetchdata().success(function(data){ 
      $scope.jsondata = data; 


      $scope.drawData = function(tobeselected){ 
             d3.nest() 
             .key(function(d) 
              { 
               console.log(tobeselected); 
               return d.tobeselected; 
              }) 
             .rollup(function(v){return v.length;}) 
             .entries(data) 
      } 

      $scope.xFunction = function() { 
       return function(d) { 
       return d.key; 
       }; 
      } 
      $scope.yFunction = function() { 
       return function(d) { 
       return d.values; 
       }; 
      } 
     }); 
})

這裏是my_json_file.json

[{"Serial":"ARTUCALA","Location":null,"Date":"2014-10-02T00:00:00","Count":1,"Preset":null},{"Serial":"ZAKDJSJS","Location":null,"Date":"2014-10-02T00:00:00","Count":1,"Preset":null},{"Serial":"ARTUCALA","Location":null,"Date":"2014-10-02T00:00:00","Count":1,"Preset":null},{"Serial":"ARTUCALA","Location":null,"Date":"2014-10-02T00:00:00","Count":1,"Preset":null},{"Serial":"ZAKDJSJS","Location":null,"Date":"2014-10-02T00:00:00","Count":1,"Preset":null},{..}...]}

代碼沒有任何錯誤是工作的罰款。

例如：如果我在下拉列表中選擇「串行」字段，它將被正確選擇並顯示在angularjs腳本文件中（使用console.log（tobeselected）;），但是我的d3.nest選項無法正常工作。

如果我給常喜歡

d3.nest() .key(function(d){return d.Serial;} .rollup(function(v){return v.length;})

我得到正確的圖表。請幫助我解決這個問題。

來源

2016-02-16 naik bm

'但我的d3.nest選項無法正常工作 - 請您詳細說明這意味着什麼？你能指望什麼？你會得到什麼？控制檯中是否有錯誤？ –

沒有錯誤，d3.nest無法處理此**返回d.tobeselected; **行。控制進入內部d3.nest，bcoz在控制檯上我得到輸出（console.log（tobeselected）;）（我選擇的是更多的選項）。如果我替換這個**返回d.Serial; **，我可以繪製。請幫我解決問題。 –

您正在記錄選擇，但返回d.tobelected。我想你的d，被選中是undefined – gaurav5430

，如果你想使用動態屬性名稱，您需要使用關聯數組語法

假設tobeselected的屬性名稱，則可以使用d[tobeselected]

所以使用return d[tobeselected]代替d.tobeselected

當您使用d.tobeselected時，javascript會查找d對象（不存在）而不是上名爲tobeselected的實際名稱等於變量的值tobeselected

來源

2016-02-16 13:36:03 gaurav5430

謝謝你的回覆。我嘗試過** d [tobeselected] **，但沒有改變，在控制檯中，我得到了我正在選擇的內容，但沒有繪製圖形。 –

你可以嘗試console.log（d [tobeselected]）; ？ – gaurav5430

我試過這個：** console.log（d [tobeselected]）; **，在控制檯我得到如下輸出：01 - ARTUCALA 01- ZAKDJSJS 02 - ARTUCALA 01 - ZAKDJSJS –

用JSON和角度NVD3

回答

相關問題