规范化和视觉表现

Question

originalArray = [
"8.797974",
"36.0614",
"82.65955",
"96.93622",
"62.24878",
"27.57068",
"6.862"
]

normedAndScaledArray = [
"1.246534",
"5.109333",
"11.71156",
"13.73434",
"8.819672",
"3.906331",
"0.9722373"
]

原始数组中的每个元素除以所有元素的总和，以便每个值都在[0,1]范围内;换句话说，他们是正常化的。然后，规范化数组中的每个元素乘以buttonHeight。我想做的是以下几点：

未规范化：

每个方框都是一个按钮，其高度为buttonHeight。问题是，由于buttonHeight为50px，因此未正确表示其值大于originalArray中buttonHeight的元素。因此，我将矢量标准化并通过buttonHeight进行缩放。但是，结果看起来像这样。

因为normedAndScaledArray中的某些元素非常小（例如1.24,3.90,0.97），尽管它们被正确表示，但它们在视觉上并不合适。 （请忽略数据和图片中的微小差异）

问。在这种情况下，我应该怎么做才能在给定的单元格中正确和恰当地表示数据？

Answer 1

我认为问题在于你正确地将数字标准化：而不是除以所有值的总和以使所有值都进入[0..1]范围，除以最大值。这样，大号按钮将获得完整的50个像素，其余的将按比例缩小尺寸：

 Value      50 * Value / max
--------    -----------
8.797974    4.538022011
36.0614     18.60058088
82.65955    42.63604977
96.93622    50
62.24878    32.10811191
27.57068    14.22104142
6.862       3.539440676