Маркированная диаграмма nvD3 не отображается

Я использую каталог 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, возникает следующая ошибка.


angularjs nvd3.js angular-nvd3
person Teja    schedule 15.03.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот упрощенная версия того, чего, я думаю, вы пытались достичь. Я не совсем понимаю функцию .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>

person Bennett Adams    schedule 16.03.2016