計算占比并保證百分比和為1

• 常用場景
• 代碼

常用場景

• 用于動態計算頁面元素的百分比占比
• 可視化中扇形統計圖的顯示數值修正

代碼

/*** 計算數組中各項的占比，保證百分比和等于1* @param arr 需要計算百分比的數組,傳入時必須降序排序* @param precision 精度 比如 4 0.34567 =》 34.56** arr降序排序，避免較小的值因為順位補值導致大于原本比他大的值，* 至于原本相等的值因為順位補值變得不相等則不考慮，* 比如[33,33,33] => [34,33,33]，將數值精確后勢必三個百分比會不相等，* 【總和等于1】與【相等的值百分比也相等】在這里只保證第一種情況，* 畢竟百分比是看的與1的關系** padEnd 屬于es6 可能需要自己改寫 '0'.padEnd(3,'-') => '0--'*/function getPercent(arr, precision) {let total = 1,//總和percentArr,//每個模塊的寬度百分比數組 精確到.00percentTotal = 0,//第一次計算百分比后，百分比總和dif,//第一次計算百分比總和后與實際和的差值,因為第一次計算百比試向下精確，所以和總會比實際和小len = arr.length,i = 0,result;//計算總和total = arr.reduce(function (a, b) {return a + b;});//簡單過濾總和為零的情況if(total == 0){return}//計算百分比數組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;//累計百分比return +r;// 2345});//計算差值dif = Math.pow(10, precision) - percentTotal;//分配差值while (dif-- > 0) {percentArr[i++] += 1;i = i % len;}//轉換為百分比字符串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));

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。