百分比加起来不等于 100%

Question

我正在创建一个包含 3 个部分的圆环图：

当用户将鼠标悬停在每个彩色部分上时，它会显示 100% 的百分比。目前各部分如下；绿色为 78%，黄色为 13%，红色为 8%。如果将所有这些加在一起不等于 100%，则等于 99%

每个部分都有来自终点的整数值，我试图将所有内容转换为百分比。

对于这个图表，我有三个值：

var values = [1397, 234, 149];

这些值在添加时需要等于 100%：

var sum = values.reduce((a, b) => a + b, 0); // this works great

要确定我使用的每个部分的百分比：

var value = 0;

values.forEach(function(number) {
    console.log(number + ' = ' + (number / sum) * 100);
    result += (number / sum) * 100;
});

产生以下结果：

1397 = 78.48314606741573
234 = 13.146067415730336
149 = 8.370786516853933
result = 100

现在这就是我认为问题所在。我无法显示浮点值，因为它不是百分比值。我决定用来Math.round()创建整数，我认为这不是正确的方法。

如何转换每个浮动值以创建等于 100% 的百分比？有替代品Math.round()吗？

Answer 1

问题是你在四舍五入。鉴于每个数字都有一个分数，导致每个数字都被打平，您在最终结果中会丢失这些分数。如果你对每个分数求和，你会得到 1。这就是你所缺少的。这通常是这些类型图表的显示方式。

但是，如果您担心总数不等于 100%，您可能需要对结果进行一些“捏造”。一种方法是查看每个分数并将最大分数的数字增加 1 以解决这一问题。您也可以将最大的整数加 1，但可能不如前者准确。这将为您提供 79%、13% 和 8% 的结果，等于 100。