0

ブレットチャートに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>

しかし、ブレット チャートを使用しようとしたときにデータを取得していません。それ以外の場合は、データを取得しています。json オブジェクトではなくデータの http 呼び出しを使用すると、次のエラーが発生します。エラーページはこちら

4

1 に答える 1

0

これは、あなたが達成しようとしていたと私が思うものの簡略化されたバージョンです。私は.finally()あなたのコードで機能を十分に理解していないので、代わりに にマップ$scope.jsondataし、各アイテム内にプロパティ$scope.transactionDataを作成して、それらの上にあるときに、nvd3 ブレット チャートのそれぞれに独自のデータ オブジェクトを供給することができるようにします。chartDatang-repeat

actualVolumeエラーの原因は、nvd3 の文字列値とnvd3 に文字列値を入力しようとしていたことが原因だと思われるexpectedVolumeため、代わりに数値に変換することで修正しました。

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>

于 2016-03-16T03:25:57.537 に答える