gpt4 book ai didi

javascript - 当范围为 1 时,为什么子弹图显示小数

转载 作者:行者123 更新时间:2023-12-03 07:30:43 24 4
gpt4 key购买 nike

我正在使用 angularjs-nvd3-directives 库中的 nvd3-bullet-chart 来显示最大当前数据。如果我有一个大于 2 的最小数字,它将起作用。它会显示整数。但如果我有最大数字 = 1,那么它会显示小数。如何删除小数?任何帮助将不胜感激,谢谢。

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

app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'bulletChart',
transitionDuration: 500,
height: 70,
margin: {
top: 10,
right: 10,
bottom: 30,
left: 125
}
},
title: {
enable: true,
text: 'Title for Line Chart',
css: {
'text-align': 'center',
'font-size': '12px'
}
}



};



$scope.dataset = {

data: {
"title": "Revenue",
"subtitle": "US$, in thousands",
"ranges": [1],
"measures": [0],
"markers": [0]
},
data2: {
"title": "Revenue",
"subtitle": "US$, in thousands",
"ranges": [150, 225, 300],
"measures": [220],
"markers": [250]
}

}
});
<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://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>

<body ng-app="plunker" ng-controller="MainCtrl">

<div ng-repeat="data in dataset">
<nvd3 options="options" data="data"></nvd3>
</div>


<br><a href="http://krispo.github.io/angular-nvd3/" target="_blank" style="float: right;">See more</a>
</body>

这是一个plunker 。您可以看到第 1 行。

最佳答案

为什么不使用tickFormat

下面是一个片段,举例说明了刻度值的 % 格式:

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

app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'bulletChart',
transitionDuration: 500,
height: 70,
margin: {
top: 10,
right: 10,
bottom: 30,
left: 125
},
tickFormat: function(d) {
return d3.format('%')(d);
},
},
title: {
enable: true,
text: 'My Chart',
css: {
'text-align': 'center',
'font-size': '14px'
}
}

};

$scope.data = {
"title": "Revenue",
"subtitle": "%",
"ranges": [0, 1],
"measures": [0.1],
"markers": [0.5],
}
});
<!DOCTYPE html>
<html ng-app="app">

<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Bullet Chart</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.5/dist/angular-nvd3.js"></script>
<script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">

<nvd3 options="options" data="data"></nvd3>

</body>

</html>

关于javascript - 当范围为 1 时,为什么子弹图显示小数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35809597/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com