馅饼太小了

Pie Piece Too Small

本文关键字:      更新时间:2023-09-26

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

然而,在某些情况下,这些数字可能相差很大。IE[1,500,250]或[400,1,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足够大来处理这个问题。当然,切得越小,效果就越差。您可以通过重新缩放较大的切片来解释这一点。

然而,我建议你找到一种更好的用户与数据交互的方式,让他们选择打开/关闭切片,或者让切片"爆炸"。

你似乎想要调整饼图的部分,如果他们太小,使他们可见/可点击。

我建议不要用这种方法解决问题(这会导致无效)数据的表示形式),您可以在饼状图之外使用标签来指向分段吗?然后,这些标签本身就可以成为可点击的。

数组中值的总和代表饼的整个"大小"。每个值在饼图中所占的百分比是该块的视觉权重。您可能希望为每一块的百分比大小设置一个最小阈值(最小阈值将与图表的直径相关)。

ie。[500、490、10]->[500/1000,490/1000,10/1000)->(50%、49%、1%)

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

这与所有点都是和,每个值都以像素计算有关。

相关文章:
  • 没有找到相关文章