![NVD3]( "NVD3")
本文介绍了Angular-nvD3条形图y轴缩放Bug（AngularJS）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我有一个应用程序可以创建一个离散条形图。出于某种原因，我无法解释（这似乎是库中的内部错误），y轴缩放为一个数据值，它不是数组中整数的最高值（在我的数组中，它缩放到5674而不是25797）。我该如何解决这个错误？ $ b 我的数据示例（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}] $ b HTML样本（app.html）： <！DOCTYPE html> < html ng-app =myApp> < head> < meta charset =utf-8/> < title> Angular-nvD3条形图< / title> < link rel =stylesheethref =style.css/> < link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css/> 将SCRIPT SRC = https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js 字符集= UTF-8 >< /脚本> < 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选项=barOptionsdata =barData>< / nvd3> < / body> < / html> 我的控制器示例（app.js）： var app = angular.module（'myApp'，['nvd3']）; $ b 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 = {图表：{类型：'discreteBarChart'，高度：450，保证金：{ 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）; }，持续时间：500， xAxis：{ axisLabel：'X Axis'}， yAxis：{ axisLabel： 'Y轴'， axisLabelDistance：-10 } } }; $] $ b .factory（'services'，['$ http'，function（$ http）{ var serviceBase ='services /' var object = {}; object.getData = function（）{ return $ http.get（'fetched-data.json'）; }; return object; }]）; 解决方案 *更新* 简单地通过强制 Y 通过向图表选项添加以下选项来增加最大值： yDomain：[0，25797] 我在这里发现了这个bug的解决方案： https://github.com/krispo/angular-nvd3/issues/47 I have an application that creates one discrete bar chart. For some reason that I can't explain (which seems to be an internal error in the library), the y-axis scales to a data value which ISN'T THE HIGHEST VALUE of integers in the array (in my array, it scales to 5674 instead of 25797). How can I fix this bug? Thank you.Sample of my data (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"}]Sample of the 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>Sample of my controller (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;}]); 解决方案 * UPDATE * (Meanwhile, I found a solution. I have to answer my own question.)Simply by forcing the Y max value by adding to the chart options the following option:yDomain: [0, 25797]I found the solution to this "bug" here: https://github.com/krispo/angular-nvd3/issues/47 这篇关于Angular-nvD3条形图y轴缩放Bug（AngularJS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 10-15 19:31