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子彈圖不顯示

回答

相關問題