3

個別の棒グラフを 1 つ作成するアプリケーションがあります。説明できない何らかの理由で (ライブラリの内部エラーのようです)、y 軸は、配列内の整数の最高値ではないデータ値にスケーリングされます (私の配列では、スケーリングされます) 25797 ではなく 5674 に)。このバグを修正するにはどうすればよいですか? ありがとうございました。

私のデータのサンプル (fetched-data.json):

[{"0":"1","1":"323","ID":"1","STOCK":"323"},{"0":"2","1":"1401","ID":"2","STOCK":"1401"},{"0":"3","1":"5674","ID":"3","STOCK":"5674"},{"0":"4","1":"25797","ID":"4","STOCK":"25797"}]

HTML のサンプル (app.html):

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

  <head>
    <meta charset="utf-8" />
    <title>Angular-nvD3 Bar Chart</title>
    <script data-require="lodash.js@4.6.1" data-semver="4.6.1" src="https://cdn.jsdelivr.net/lodash/4.6.1/lodash.js"></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://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <nvd3 options="barOptions" data="barData"></nvd3>
  </body>

</html>

私のコントローラ（app.js）のサンプル：

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

app.controller('MainCtrl', ['$scope', 'services', function($scope, services) {     
    $scope.barData = [];

    var stock = {
      key: 'Product stock',
      values: []
    };

    stock.values = _.map(data.data, function(prod) {
      return {
        label: prod.ID,
        value: prod.STOCK
      };
    });
    console.log(stock);
    $scope.barData.push(stock);
  });

  $scope.barOptions = {
    chart: {
      type: 'discreteBarChart',
      height: 450,
      margin : {
        top: 20,
        right: 20,
        bottom: 50,
        left: 55
      },
      x: function(d){return d.label;},
      y: function(d){return d.value;},
      showValues: true,
      valueFormat: function(d){
        return d3.format(',.4f')(d);
      },
      duration: 500,
      xAxis: {
        axisLabel: 'X Axis'
      },
      yAxis: {
        axisLabel: 'Y Axis',
        axisLabelDistance: -10
      }
    }
  };
}])

.factory('services', ['$http', function($http){
  var serviceBase = 'services/'
  var object = {};
  object.getData = function(){
    return $http.get('fetched-data.json');
  };
  return object;
}]);
4

1 に答える 1