javascript - 一块太小

Question

我有一个动态数据数组，其中包含 3 个用于构建饼图的整数。在大多数情况下，它可以正常工作 IE: [5, 10, 3]。饼图正确呈现，您可以看到所有部分。

然而，在某些情况下，数字可能相差很大。即 [1,500,250] 或 [400,1,2]。在这种情况下，您只会看到较大的馅饼，而较小的馅饼会变得如此之小以至于看不见；或点击。

我需要一些方法来纠正这些情况下的数据数组。我有能力在调整显示值的同时保留真实值，以便显示碎片。我正在寻找的是检查是否有必要，然后根据其他值调整它的相对数字。

建议？

Answer 1

如果饼图的各个部分太小而无法使其可见/可点击，您似乎想要调整它们的大小。

我是否可以建议您不要以这种方式解决问题（这会给出无效的数据表示），而是可以使用饼图之外的标签来指向段？然后，这些标签本身就可以被点击。

Answer 2

好吧，首先我要说的是，您并没有“纠正”数据，而是捏造数据以满足您的要求。

基本上，有一个最小百分比可以点击该比例的一部分，并且您需要将所有部分至少提升到这个大小。

当然——这在最极端的例子中是行不通的。如果您有 1,000,000 个切片，所有切片的值都相同，那么无论您如何缩放它们，其中一些切片（或全部切片）都会太小。

您还需要了解缩放某些非常小的切片将如何丢弃其他较大切片之间的明显比例。

但是 - 一种非常粗暴的做法可能是......

var minPC = 0.5 ,    // the minimum %age slice visible
    total;         // total should be set to the sum of the values of all your slices

var minValue = total / 100 * minPC; // The smallest value visible (given the current total)

for (var slice in slices) { //assuming slices is a standard JS 'array'
   if ( slices[slice] < minValue ) slices[slice] = minValue;
}

当然，像这样使切片更大会反过来增加总数 - 这意味着小切片仍将小于最小可见百分比。您将需要minPC足够大以应对此问题。当然，你拥有的非常小的切片越多，这种效果就越差。您可以通过重新缩放更大的切片来解释这一点。

但是-我建议您通过让用户选择开/关切片或让切片“爆炸”来找到一种更好的用户与数据交互的方法。

Answer 3

数组中的值的总和代表饼的整个“大小”。每个值所占饼图的百分比是该块的视觉重量。您可能希望为每件的百分比大小设置一个最小阈值（最小阈值与图表的直径有关）。

IE。[500, 490, 10] -> [500/1000, 490/1000, 10/1000] -> [50%, 49%, 1%]

如果任何值小于您的最小阈值，您需要将其增加到最小阈值并相应地调整您的其他值，因此它们都加起来为 100%

Answer 4

这与所有点都是总和并且每个值都以像素计算的事实有关。