雅虎奥运奖牌榜的秘密

八卦之王今天刷到一条八卦，是关于Yahoo.com的奥运奖牌榜的

上图是2021东京奥运会的奖牌榜。用奖牌数排名也就罢了，可为什么得了27枚金牌的美国队比得了32枚金牌的中国队的黄柱还要长一截？

有人说是因为按照奖牌数排名的，可再怎么排也不应该27比32还长啊。

有人说是按照总数算长度，然后再按照比例分三段的，可那样也无法解释27比32更长。

也有人说三段分的比例是一样的，是3等分，可有好事者量过像素了，不是固定比例，美国那一条是金银的长度基本相同，铜要短一些。中国这一条则是金最长，铜最短，同一条内都不是按照比例的。

也有人说了，可能就是总长度是按照比例的，里面三份的宽度比例是按照美国的复制的，但这也解释不了其他国家的金银铜比例。

又有人提出新解释，可能是某一天画了个图，然后之后就只是更新数字....

各种猜想，怎么验证呢？还是代码见。

正好中午吃饭早，打开浏览器，右键选择查看源代码，可以发现，这不是一张图，是有代码的。那么，这就不是UI设计师的锅，这个top chart完全 是代码控制的

“width:100%" 什么的，就是用来控制各个柱⼦长度的。 

那么是程序员⼿残了吗？⼋卦之王做了⼀点深度的⼋卦。先来⼀组数字。 

总奖牌数比例： 

美：中：俄罗斯 = 81：70：53 = 1：0.864：0.654

柱⼦长度比例：

美：中：俄罗斯 = 528：459.36：348.47 = 1：0.87：0.66

美国三个⼦块的长度比例：

4：4：3

中国三个⼦块的长度比例： 

5：4：3

俄罗斯三个⼦块的长度比例： 

3：4：4

我们可以得出如下结论：

整个柱⼦的长度是按照总奖牌比例的。在代码上，用了精确的宽度控制来实现。美国是 100%，中国，俄罗斯依次是87%和66%。奇怪的是，在每个国家的柱⼦内部划分的时候，使 用了非常粗糙的分配。比如美国是4：4：3，⽽中国是5：4：3。这导致美国的⾦牌柱⼦比实 际情况稍微长了⼀点，中国的⾦牌柱⼦，恰好又比实际情况短了⼀点。最终的效果就是美国 的⾦牌看起来比中国要多。

其实，完全可以简单的按照⾦银铜的比例设置。 

美国三个⼦块的长度比例：32%：40% ：28% 

中国三个⼦块的长度比例：46%：31%：23% 

俄罗斯三个⼦块的长度比例：26%：40%：34% 

在代码上这么实现才是最简单的。笔者顺⼿改了⼀下，按照真实的比例的效果，跟原图放在⼀起对比：

最后笔者忍不住发出直击灵魂的一问：雅虎的攻城狮写的这代码好意思领工资么....