Angular-nvD3条形图y轴缩放错误(AngularJS)
Angular-nvD3 Bar Chart y-axis Scaling Bug (AngularJS)
我有一个创建离散条形图的应用程序。出于某种我无法解释的原因(这似乎是库中的内部错误),y轴缩放到一个数据值,该值不是数组中整数的最高值(在我的数组中,它缩放到5674,而不是25797)。如何修复此错误?非常感谢。
我的数据示例(提取的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;
}]);
*更新* (同时,我找到了一个解决方案。我必须回答我自己的问题。)
只需在图表选项中添加以下选项即可强制Y最大值:
yDomain: [0, 25797]
我在这里找到了这个"bug"的解决方案:https://github.com/krispo/angular-nvd3/issues/47
相关文章:
- AngularJS错误:提供程序必须从$get工厂方法返回值
- 修复AngularJS错误:提供程序必须从$get工厂方法返回值
- AngularJS错误:$interpolate:$routeParams的interr插值错误
- AngularJS错误:请求的键的值不是对象.keys@[本地代码]
- AngularJS错误处理:根据错误数组显示错误
- AngularJs 错误:$http请求虽然在控制器中定义
- Angularjs 错误中的简单选项卡系统
- AngularJS错误:$injector:unp未知提供程序-$modalInstanceProvider
- AngularJS错误”;element.childs(..).slideToggle不是函数“;
- Promise创建自定义失败不是函数Angularjs错误
- AngularJS错误:$rootScope:infdig Infinite$digest循环:达到10次$digest
- AngularJS错误:$injector:modulerr我的浏览器窗口中出现模块错误
- 使用带有AngularJS错误的ngRoute
- Angularjs:错误:'追加'对未实现接口FormData的对象调用.jQuery.param/ad
- IE中的AngularJS错误与样式与ng样式
- AngularJS 1.3 - 错误:错误:modulerr 模块错误(使用 ng-view,$routeProvide
- AngularJS 错误 current.$$route 未定义
- AngularJS 错误:$rootScope:infdig 无限$digest循环
- AngularJS 错误:无法读取未定义的属性“get”
- AngularJS错误:“参数'FirstCtrl'不是一个函数,未定义”