用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

回答

相关问题