nvD3 子弹图未显示答案

【问题标题】：nvD3 bullet chart is not showing upnvD3 子弹图未显示
【发布时间】：2016-03-15 20:12:40
【问题描述】：

我正在使用 angualr 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

【问题讨论】：

标签： angularjs nvd3.js angular-nvd3

【解决方案1】：

这是我认为您试图实现的目标的简化版本。我没有在你的代码中得到 .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="nvd3@1.8.1" data-semver="1.8.1" rel="stylesheet" href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css" />
    
    <script data-require="angular.js@1.3.9" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
    <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
    <script data-require="nvd3@1.8.1" 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>

【讨论】：