问题描述
我正在进行HTTP调用，并且得到两个值。我需要将最大值映射到1，因为我使用的进度条库仅接受0到1之间的值。这就像：
已交付= 1000;
待处理= 250;
然后我需要减去这两个值（在本示例中为75），但我需要将此值设为0.75。
如果已交付= 1250并且未决= 0，那么我需要将总变量设置为1，以便进度条跨度为100％。
let delivered,pending,cumplidas,progress;
fetch("http://157.230.190.251/api/v1/cmodels/secure/dashboard")
.then(function(response) {
return response.json();
})
.then(function(json) {
console.log(json)
cumplidas = json.kpis[0]
delivered = cumplidas.entregadas;
pending = cumplidas.pendientes;
progress = delivered - pending;
console.log(progress)
})
var bar = new ProgressBar.Circle(progreso,{
strokeWidth: 6,easing: 'easeInOut',duration: 1400,color: '#FFEA82',trailColor: '#eee',trailWidth: .6,svgStyle: {
display: 'block',width: '100%'
},text: {
value: '75',// here I need to insert 'progress' variable,not this hardcoded value
style: {
color: '#f00',position: 'absolute',left: '50%',top: '50%',padding: 0,margin: 0,// You can specify styles which will be browser prefixed
transform: {
prefix: true,value: 'translate(-50%,-50%)'
}
}}
});
bar.animate(.75); /* Number from 0.0 to 1.0 . Here I need to instert 'progress' variable,not this hardcoded value*/ #progreso {
margin: 20px;
width: 150px;
height: 150px;
}<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8" />
<Meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Document</title>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"
></script>
<script src="https://cdn.tutorialjinni.com/progressbar.js/1.1.0/progressbar.js"></script>
</head>
<body>
<div id="progreso">
</div>
<script>
</script>
</body>
</html>解决方法
您将通过以下方式实现这一目标：
let progress = delivered / (pending + delivered);