百分比不加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。