Angular-nvD3条形图y轴缩放Bug（AngularJS） [英] Angular-nvD3 Bar Chart y-axis Scaling 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="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>
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）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
