将大数字计算为100%的条形宽度

Question

我正在使用以下内容创建进度条：https://element.eleme.io/#/en-美国/组件/进度

我的值大于100。我收到的每一个回复都会给我一个不同的数字列表，大多数时候它们都会大于100。

我的一个回复示例是：

值：51460值：35947值：21452值：12750值：7534值：6969值：5877值：5829值：5288值：75386

我想知道如何计算大数字，以便将它们设置为进度组件的宽度，并且它将在100%的宽度限制内？

谢谢你，

Answer 1

您必须知道将收到的最大值。

这样，您可以使用percentage = (currentValue / maxValue) * 100，然后将该值用作0-100值。

Answer 2

如果你对任何数字进行百分比运算，你应该知道它的最大

举个例子，你正在传输文件

您总共有50000个文件

在这种情况下，您有

max = 50000;
current = getFilesTransferred(); //returns current number of files transferred
percentage = (current / max) * 100; //calculate percentage of transferred files
console.log("Files transferred : %" + percentage); // this will print as an example "Files Transferred : %20" for current = 10 000

Answer 3

如果您正在寻找响应中所有数字的%，分布在100%之间，那么这里有一个解决方案。

.el-row {
margin-bottom: 10px;
}

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<div id="app">
<el-row>
<el-col :span="24">
<h1>Percentage of all values distributed between 100%</h1>
</el-col>
</el-row>
<el-row v-for="(value, index) in values" :key="index">
<el-col :span="4">
<div>
{{ value }} = {{ result[index] }}%
</div>
</el-col>
<el-col :span="20">
<div>
<el-progress :text-inside="true" :stroke-width="20" :percentage="result[index]"></el-progress>
</div>
</el-col>
</el-row>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
values: [51460, 35947, 21452, 12750, 7534, 6969, 5877, 5829, 5288, 75386]
}
},
computed: {
result() {
return this.percentRound(this.values)
}
},
methods: {
percentRound(ipt, precision) {
if (!precision) {
precision = 0
}
if (!Array.isArray(ipt)) {
throw new TypeError('percentRound input should be an Array')
}
const iptPercents = ipt.slice()
const length = ipt.length
const out = new Array(length)
let total = 0
for (let i = length - 1; i >= 0; i--) {
if (typeof iptPercents[i] === 'string') {
iptPercents[i] = Number.parseFloat(iptPercents[i])
}
total += iptPercents[i] * 1
}
if (isNaN(total)) {
throw new TypeError('percentRound invalid input')
}
if (total === 0) {
out.fill(0)
} else {
const powPrecision = Math.pow(10, precision)
const pow100 = 100 * powPrecision
let check100 = 0
for (let i = length - 1; i >= 0; i--) {
iptPercents[i] = 100 * iptPercents[i] / total
check100 += out[i] = Math.round(iptPercents[i] * powPrecision)
}
if (check100 !== pow100) {
const totalDiff = (check100 - pow100)
const roundGrain = 1
let grainCount = Math.abs(totalDiff)
const diffs = new Array(length)
for (let i = 0; i < length; i++) {
diffs[i] = Math.abs(out[i] - iptPercents[i] * powPrecision)
}
while (grainCount > 0) {
let idx = 0
let maxDiff = diffs[0]
for (let i = 1; i < length; i++) {
if (maxDiff < diffs[i]) {
idx = i
maxDiff = diffs[i]
}
}
if (check100 > pow100) {
out[idx] -= roundGrain
} else {
out[idx] += roundGrain
}
diffs[idx] -= roundGrain
grainCount--
}
}
if (powPrecision > 1) {
for (let i = 0; i < length; i++) {
out[i] = out[i] / powPrecision
}
}
}
return out
}
}
})
</script>
</html>