원형 조각이 너무 작습니다

Question

원형 차트를 작성하는 데 사용되는 3 개의 정수가 들어있는 동적 데이터 배열이 있습니다. 대부분의 경우 잘 작동합니다. IE : [5, 10, 3]. 원형 차트가 올바르게 렌더링되고 모든 조각을 볼 수 있습니다.

그러나 일부 경우 숫자가 크게 다를 수 있습니다. IE [1,500,250] 또는 [400,1,2]. 이 경우에는 파이 조각 중 큰 조각 만 볼 수 있고 작은 조각은 보이지 않을 정도로 작아집니다. 클릭합니다.

이러한 경우 데이터 배열을 수정하는 방법이 필요합니다. 나는 조각이 나타나도록 표시 값을 조정하면서 참값을 유지할 수있는 능력이 있습니다. 내가 찾고있는 것은 그것이 필요한지 아닌지를 확인한 후 다른 값을 기준으로 상대적인 숫자를 조정하는 것입니다.

제안 사항?

Answer 1

글쎄 우선 내가 요구 사항을 충족시키기 위해 데이터를 퍼지하는 데 데이터를 "수정하는"것은 아닙니다.

기본적으로 해당 비율의 조각을 클릭 할 수있는 최소 비율이 있으며 모든 조각을이 크기 이상으로 가져와야합니다.

물론 이것은 가장 극단적 인 예제에서는 작동하지 않습니다. 만약 당신이 100,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 2

배열의 값의 합계는 파이의 전체 "크기"를 나타냅니다. 각 값이 인 비율은 해당 조각의 시각적 무게입니다. 각 조각의 백분율 크기에 대한 최소 임계 값을 설정하려고합니다 (최소 임계 값은 차트의 지름과 관련이 있습니다).

즉. [500, 490, 10] -> [500/1000, 490/1000, 10/1000] -> [50 %, 49 %, 1 %]

값이 최소 임계 값보다 작 으면 최소 임계 값까지 증가시키고 이에 따라 다른 값을 조정하면 모든 값이 100 %가됩니다.

Answer 3

이는 모든 점이 합계이며 각 값은 픽셀로 계산된다는 사실과 관련됩니다.

Answer 4

파이의 세그먼트를 표시/클릭 가능하게 만들 수 없을 정도로 작 으면 세그먼트의 크기를 조정하려는 것 같습니다.

이런 식으로 문제를 해결하는 대신 (데이터를 나타내는 이 유효하지 않음) 원형 차트 외부의 레이블을 세그먼트를 가리 키도록 제안 할 수 있습니까? 그러면이 라벨을 클릭 할 수있게됩니다.