nvD3子弹图不显示

我使用angualr nvD3目录中的子弹图。我想在表格中以子弹图的形式显示数据。nvD3子弹图不显示

var app = angular.module('plunker', ['nvd3']); 
 

 
app.controller('MainCtrl', ['$scope','$http', function ($scope, $http) { 
 
    $scope.LoadInit = function() { 
 
     //alert('1'); 
 
    $scope.jsondata = [{'transactionName': '1', 
 
         'actualVolume':'150', 
 
         'expectedVolume':'300' 
 
         }, 
 
         { 
 
         'transactionName': '2', 
 
         'actualVolume':'250', 
 
         'expectedVolume':'300' 
 
         } 
 
         ] 
 
    $scope.transactionData= $scope.jsondata; 
 
    .finally(function(){ 
 
     $scope.data1 = { 
 
       //"title": "Revenue", 
 
       //"subtitle": "US$, in thousands", 
 
       "ranges": [0,100,1300], 
 
       "measures": [record.actualVolume], 
 
       "markers": [record.expectedVolume] 
 
      }; 
 
     }); 
 
    $scope.options1 = { 
 
     chart: { 
 
      type: 'bulletChart', 
 
      transitionDuration: 1 
 
     } 
 
    }; 
 
     
 
    }; 
 
    $scope.LoadInit(); 
 
    }]);

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>Angular-nvD3 Bullet Chart</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script> 
 
    <script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
     
 
    <div class="panel-body" style="margin-top: 10px"> 
 
           <table class="table text-center"> 
 
            <thead> 
 
            <tr> 
 
             <th> tname</th> 
 
             <th> volume</th> 
 
             <th>graph</th> 
 
            </tr> 
 
            </thead> 
 
            <tbody> 
 
            <tr ng-repeat="record in transactionData"> 
 
             <td>{{record.transactionName}}</td> 
 
             <td>{{record.actualVolume}}</td> 
 
             <td><nvd3 options="options1" data="data1"></nvd3></td> 
 
            </tr> 
 
            </tbody> 
 
           </table> 
 
          </div> 
 
    
 
    
 
    </body> 
 

 
</html>

，但我没有得到数据，当我试图用子弹图，其他明智我收到的数据。当我使用http调用数据而不是json对象时，以下错误即将到来。 click here for error page

来源

2016-03-15 Teja

这是我想你试图实现的简化版本。我在代码中不太清楚.finally()的功能，所以我的代码是$scope.jsondata到$scope.transactionData，在每个项目中创建一个chartData属性，这样当你对它们进行ng-repeat的处理时，可以将每个nvd3项目符号图表自己的数据对象。

我相信你得到的事实，你试图养活actualVolume和expectedVolume字符串值nvd3都造成了错误，所以我固定，通过将它们转换为数字的值改为：

chartData: { 
    ranges: [100, 150, Number(record.expectedVolume)*1.5], 
    measures: [Number(record.actualVolume)], 
    markers: [Number(record.expectedVolume)] 
}

看下面的其余部分...希望这可以帮助你。

var app = angular.module('plunker', ['nvd3']); 
 

 
app.controller('MainCtrl', ['$scope', function ($scope) { 
 
    $scope.jsondata = [ 
 
    { 
 
     'transactionName': '1', 
 
     'actualVolume':'150', 
 
     'expectedVolume':'300' 
 
    }, 
 
    { 
 
     'transactionName': '2', 
 
     'actualVolume':'250', 
 
     'expectedVolume':'300' 
 
    } 
 
    ]; 
 

 
    $scope.transactionData = $scope.jsondata.map(function(record) { 
 
    return { 
 
     transactionName: record.transactionName, 
 
     actualVolume: record.actualVolume, 
 
     expectedVolume : record.expectedVolume, 
 
     chartData: { 
 
     ranges: [100, 150, Number(record.expectedVolume)*1.5], 
 
     measures: [Number(record.actualVolume)], 
 
     markers: [Number(record.expectedVolume)] 
 
     } 
 
    }; 
 
    }); 
 

 
    $scope.options1 = { 
 
    chart: { 
 
     type: 'bulletChart', 
 
     transitionDuration: 500 
 
    } 
 
    }; 
 
}]);

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>Angular-nvD3 Bullet Chart</title> 
 
    <link data-require="[email protected]" data-semver="1.8.1" rel="stylesheet" href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css" /> 
 
    
 
    <script data-require="[email protected]" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
    <script data-require="[email protected]" data-semver="1.8.1" src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.js"></script> 
 
    <script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script> 
 

 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    <div class="panel-body" style="margin-top: 10px"> 
 
     <table class="table text-center"> 
 
     <thead> 
 
      <tr> 
 
      <th> tname</th> 
 
      <th> volume</th> 
 
      <th>graph</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr ng-repeat="record in transactionData"> 
 
      <td>{{record.transactionName}}</td> 
 
      <td>{{record.actualVolume}}</td> 
 
      <td class="table-cell-chart"> 
 
       <nvd3 options="options1" data="record.chartData"></nvd3> 
 
      </td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </body> 
 

 
</html>

来源

2016-03-16 03:25:57

nvD3子弹图不显示

回答

相关问题