2011-08-02 6 views
1

기본적으로 표시해야하는 곳은 각 바 너비가 숫자 인 사용자 연락처의 총 개수입니다 (CSS/PHP). px (각 접점 = 1 픽셀)의 접점은 매우 사소합니다. 수학 - 동적 차트, 비율 유지

_______.____________________600px 
|  |      | 
| mario | ===== (54) px   | 
| julie | ========= (65) px  | 
| john | === (40) px   | 
| mary | ============= (70) px | 
|_______|________________________| 
     0% 30% 50% 80% 100% 

지금, 내 문제는 이제 600PX을 가정 해 봅시다 그래프 컨테이너는 고정 폭해야한다는, 그래서 theese 중 하나가 600 개 이상의 연락처가있는 경우, 무슨 일이? 예, 알아 듣겠습니다. ;-)

그렇다면 백분율로 변환하여 각 합계가 적절히 조정되고 그래프의 끝에 도달하지 않는 방법은 무엇입니까?

감사합니다.

답변

3

모든 값 (54 + 65 + 40 +70 = 229)의 합계를 계산하고 각 값의 비율 (54/229 = 23.58 %)을 계산 한 다음 600px (600 * .2358 = 141.48). 그 값을 막대 너비로 설정할 수 있습니다 (첫 번째 막대는 141px가됩니다).

(당신은 아마 루프에서 이러한 값을 계산합니다 있지만)는 다음과 같이 보일 수있는 코드에서

:

$total = 229; 
$bar1 = 54; 
$bar1Length = round(600 * ($bar1/$total)); // 141 
+0

+1 안녕, 난 또 다른 작은 질문이 –

+0

;-) 감사합니다 ;-) 감사, 공식 무엇인가 차트는 0 % - 10 % - 20 % - ... - 100 % 항상 600을 기준으로합니까? 고마워 친구! –

+0

'$ bar1/$ total'은 백분율 (예 : 0.754)로 74 %와 비슷한 값을 얻고 100을 곱한 값을 곱합니다. 그래서 round (($ bar1/$ total) * 100)와 같은 것입니다. "%"' –

1

뭔가

같은

current_width = CURRENT_VALUE * (MAX_WIDTH/MAX_VALUE)

MAX_WIDTH = 600PX

.

이것은 의사 코드에 불과합니다. 귀하의 질문에 세부 사항이 없기 때문에 구체적인 것을 적어 두지는 못합니다.

+0

+1 당신이 –

1

막대에 사용할 수있는 폭이 totalWidth 경우, 당신은 같은 것을 할을 (에 C 의사, 내가) PHP를 모르는 : 내가 아래에 추가 할 경우

int maxContacts = 0; 

for (int i = 0; i < numberOfUsers; i++) 
{ 
    if (users[i].numberOfContacts > maxContacts) 
     maxContacts = users[i].numberOfContacts; 
} 

// now you have the max number of contacts 

for (int i = 0; i < numberOfUsers; i++) 
{ 
    widthPercent = users[i].numberOfContacts/maxContacts; // this is the percentage 
    display_width_for_this_user = totalWidth * widthPercent; // gives the relative width 
}