計(jì)算占比并保證百分比和為1

• 常用場景
• 代碼

常用場景

• 用于動(dòng)態(tài)計(jì)算頁面元素的百分比占比
• 可視化中扇形統(tǒng)計(jì)圖的顯示數(shù)值修正

代碼

/*** 計(jì)算數(shù)組中各項(xiàng)的占比，保證百分比和等于1* @param arr 需要計(jì)算百分比的數(shù)組,傳入時(shí)必須降序排序* @param precision 精度 比如 4 0.34567 =》 34.56** arr降序排序，避免較小的值因?yàn)轫樜谎a(bǔ)值導(dǎo)致大于原本比他大的值，* 至于原本相等的值因?yàn)轫樜谎a(bǔ)值變得不相等則不考慮，* 比如[33,33,33] => [34,33,33]，將數(shù)值精確后勢必三個(gè)百分比會(huì)不相等，* 【總和等于1】與【相等的值百分比也相等】在這里只保證第一種情況，* 畢竟百分比是看的與1的關(guān)系** padEnd 屬于es6 可能需要自己改寫 '0'.padEnd(3,'-') => '0--'*/function getPercent(arr, precision) {let total = 1,//總和percentArr,//每個(gè)模塊的寬度百分比數(shù)組 精確到.00percentTotal = 0,//第一次計(jì)算百分比后，百分比總和dif,//第一次計(jì)算百分比總和后與實(shí)際和的差值,因?yàn)榈谝淮斡?jì)算百比試向下精確，所以和總會(huì)比實(shí)際和小len = arr.length,i = 0,result;//計(jì)算總和total = arr.reduce(function (a, b) {return a + b;});//簡單過濾總和為零的情況if(total == 0){return}//計(jì)算百分比數(shù)組percentArr = arr.map(function (d, index) {let r = (d / total + '').substring(2, 2 + precision);//0.23456 => 2345r = +r.padEnd(precision, '0');//0.23 => 2300percentTotal += r;//累計(jì)百分比return +r;// 2345});//計(jì)算差值dif = Math.pow(10, precision) - percentTotal;//分配差值while (dif-- > 0) {percentArr[i++] += 1;i = i % len;}//轉(zhuǎn)換為百分比字符串result = percentArr.map(function (per) {per += '';per=per.padStart(precision, '0');return parseFloat(per.replace(/(\d{2})/, '$1.')) + '%'});return result}console.log(getPercent([33, 33, 33], 4));

總結(jié)

以上是生活随笔為你收集整理的计算占比并保证百分比和为1的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。