2013-06-04 118 views
0

我有一個動態數據數組,其中包含3個用於構建餅圖的整數。在大多數情況下,IE瀏覽器工作正常:[5,10,3]。餅圖呈現正確,你看到所有的作品。餡餅太小

但是在某些情況下,這些數字可能會有很大的不同。 IE [1,500,250]或[400,1,2]。在這種情況下,你只會看到較大的餡餅,而較小的餡餅變得如此之小以至於看不見;或點擊。

我需要一些方法來糾正這些情況下的數據數組。我有能力在調整顯示值的同時保留真實值,以便顯示各個部分。我在尋找的是檢查是否有必要,然後根據其他值調整它的相對數字。

對此提出建議?

回答

3

首先,我會說你並沒有像對待數據那樣「糾正」數據來滿足你的要求。

基本上,有一個最小百分比,其中一部分的比例將是可點擊的,你將需要把所有部分至少這個大小。

當然 - 這不能在最極端的例子中工作。如果你有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足夠大以應付此問題。當然,越小的切片越有利於這種效果。您可以解釋這是重新縮放更大的切片。

但是,我建議您通過讓用戶選擇開/關切片或切片「爆炸」來找到更好的用戶交互方式。

+0

這是我要採取的方法。鑑於數據點將始終爲3或更少,「修復」百分比似乎是最好的方法。謝謝。 –

+0

是的 - 如果你確定你會一直使用少量的切片,那麼我認爲它是可以接受的。雖然有關數據表示的有趣問題 - 有時候餅圖並不適合工作。我認爲對數縮放切片可能會讓人感到困惑:) –

1

數組中值的總和表示餅圖的整個「大小」。 每個值所具有的餡餅的比例是該片的視覺重量。您可能希望爲每件作品的百分比尺寸設置一個最小閾值(最小閾值將與圖表直徑相關)。

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

如果任何值小於最小閾值,則需要將其增加到最小閾值並相應地調整其他值,以便它們全部合計爲100%

+0

同意,這是我會做的。 –

0

它與事實有關,所有點都是總和,並且每個值都計算爲像素。

2

您似乎想要調整餅圖片段的大小,如果它們太小而無法使其可見/可點擊。

我可以建議,而不是通過這種方式解決問題(這會導致無效的 數據表示),您可以改爲使用餅圖以外的標籤指向段?這些標籤本身可以被點擊。

+0

擴展界面以允許用戶「看到」可見切片似乎是解決此問題的最正確方法。 –

+0

我已經完成了這項工作,但該頁面非常明顯。 –