Angular-nvD3 Balkendiagramm Y-Achsen-Skalierungsfehler (AngularJS)

Question

Apr 20, 2016, 08:22 PM

json html angular-nvd3 javascript angularjs

Angular-nvD3 Balkendiagramm Y-Achsen-Skalierungsfehler (AngularJS)

Ich habe eine Anwendung, die ein einzelnes Balkendiagramm erstellt. Aus irgendeinem Grund, den ich nicht erklären kann (was ein interner Fehler in der Bibliothek zu sein scheint), skaliert die y-Achse auf einen Datenwert, der NICHT DER HÖCHSTE WERT von ganzen Zahlen im Array ist (in meinem Array skaliert er) bis 5674 anstelle von 25797). Wie kann ich diesen Fehler beheben? Vielen Dank

Beispiel meiner Daten (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"}]

Beispiel des HTML (app.html):

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

  <head>
    <meta charset="utf-8" />
    <title>Angular-nvD3 Bar Chart</title>
    <script data-require="[email protected]" 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>

Beispiel meines Controllers (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;
}]);