百分比不增加高达100％

Question

我创建具有3段圆环图：

当用户将鼠标悬停在颜色区域的每一个它显示的比例为100％。目前每个部分如下;绿色是78％，黄色是13％，红色是8％。如果将所有这些加在一起并不等于100％，则等于99％

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

对于这个图表I有三个值：

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.