百度echarts饼图百分比的计算规则---最大余额法

最终结果呈现

最终百分比的显示

怎么保证所有占比之和等于100%,什么是最大余额法?

echarts的饼图的百度通过传入数据自动算出每个项在总数当中所占的比例大小,且保证所有的比率相加等于100%,那他是如何计算百分比的呢。通过阅读源码我们可以得知他使用最大余额法,那什么是最大余额法呢?

概念说明

那什么是最大余额方法呢?以下概念摘自维基百科,有一点晦涩难懂,下一节通过具体例子分析一下就好懂多了最大余额方法(英文:Largest Remainder Method)又称数额制,是比例代表制投票制度下,一种议席分配的方法,相对于最高均数方法。

透过最大余额方法,候选人须以名单参选,每份名单的人数最多可达至相关选区内的议席数目。候选人在名单内按优先次序排列。选民投票给一份名单,而不是个别候选人。投票结束后,把有效选票除以数额(quota,见下)。一份名单每取得数额1倍的票数,便能获分配一个议席。每份名单的候选人按原先订立的顺序当选。

如此类推、将议席分配至每份名单的余额,均比数额为低的时候,则从最大余额者顺序分配余下议席;最大余额方法因而得名。

具体例子

假设选举投票人次100,000,分配10个议席。选举结果:

投票选举

黑尔数额为黑尔数额为 100000/10 = 10000张选票,即每张名单每获得10,000张选票,便能首先得到1个议席:

议席投票结果分析图

因此,名单丙、丁、戊各得1席,名单己得4席。余下3席,则对比各个余额。其中名单乙、戊、己的余额最大,因此分别获选其余3席。

换言之,在最大余额方法之下,名单乙、丙、丁各得1席,名单戊得2席,名单己得5席。

源码解析


看了以上的图应该对最大余额法有一点的了解了。那我们来看看源码是如何通过最大余额法来进行百分比分配的。

以下通过一组例子数据来

数据值列表:[2, 4, 3]

精度:2(代表百分数的值最多保留2位小数)

期望结果: [ 22.22, 44.45, 33.33 ]

/**

*

* 给定一个精度值,计算某一项在一串数据中占据的百分比,确保百分比总和是1(100%)

* 使用最大余额法

* @param {Array.} valueList a list of all data 一列数据

* @param {number} idx index of the data to be processed in valueList 索引值(数组下标)

* @param {number} precision integer number showing digits of precision 精度值

* @return {number} percent ranging from 0 to 100 返回百分比从0到100

*/

function getPercentWithPrecision (valueList, idx, precision) {

if (!valueList[idx]) {

return 0

    }

var sum = valueList.reduce(function (acc, val) {

return acc + (isNaN(val) ?0 : val)

}, 0)

if (sum ===0) {

return 0

    }

console.log('sum', sum)

// sum 9

    var digits = Math.pow(10, precision)// digits 100

    console.log('digits', digits)

var votesPerQuota = valueList.map(function (val) {

return (isNaN(val) ?0 : val) / sum * digits *100 // 扩大比例,这样可以确保整数部分是已经确定的议席配额,小数部分是余额

    })

console.log('votesPerQuota', votesPerQuota)

// votesPerQuota [ 2222.222222222222, 4444.444444444444, 3333.333333333333 ] 每一个项获得的议席配额,整数部分是已经确定的议席配额,小数部分是余额

    var targetSeats = digits *100 // targetSeats 10000 全部的议席

    console.log('targetSeats', targetSeats)

var seats = votesPerQuota.map(function (votes) {

// Assign automatic seats.

        return Math.floor(votes)

})

console.log('seats', seats)

// seats [ 2222, 4444, 3333 ] 获取配额的整数部分

    var currentSum = seats.reduce(function (acc, val) {

return acc + val

}, 0)

console.log('currentSum', currentSum)

// 9999 表示已经配额了9999个议席,还剩下一个议席

    var remainder = votesPerQuota.map(function (votes, idx) {

return votes - seats[idx]

})

console.log('remainder', remainder)

// [ 0.2222222222221717, 0.4444444444443434, 0.33333333333303017 ]得到每一项的余额

// Has remainding votes. 如果还有剩余的坐席就继续分配

    while (currentSum < targetSeats) {

// Find next largest remainder. 找到下一个最大的余额

        var max = Number.NEGATIVE_INFINITY

var maxId =null

        for (var i =0, len = remainder.length; i < len; ++i) {

if (remainder[i] > max) {

max = remainder[i]

maxId = i

}

}

// max: 0.4444444444443434, maxId 1

// Add a vote to max remainder.

        ++seats[maxId]// 第二项,即4的占比的坐席增加1

        remainder[maxId] =0

        ++currentSum// 总的已分配的坐席数也加1

    }

return seats[idx] / digits

}

参考链接


最大余额法

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,616评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,020评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,078评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,040评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,154评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,265评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,298评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,072评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,491评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,795评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,970评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,654评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,272评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,985评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,815评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,852评论 2 351

推荐阅读更多精彩内容