분산 형 차트 수식

CSS와 소수점 이미지가있는 웹 페이지에서 분산 형 차트를 만들려고합니다. 디자인을 성공적으로 만들었지 만 이제는 분산 형 차트가 실제로 어떻게 작동하는지 알 수 없습니다. 누구든지 내가 어떻게 그들을 배정 할 수 있는지 알 수 있습니까? 내 차트 폭이 차트분산 형 차트 수식

http://chart.apis.google.com/chart?cht=s&chd=t:12,16,16,24,26,28,41,51,66,68,13,45,81|16,14,22,34,22,31,31,48,71,64,15,38,84&chs=250x100&chl=Hello|World

내가이 사용할 수 없습니다처럼 968, 높이 432 입니다하지만 난이 어떤 도움을

감사를 작동하는 방법을 알고 싶어요.

<?php 
$w = 968; $h = 432; 
$xmin = 0; $xmax = 968; 
$ymin = 10; $ymax = 100; 
$x = 10; $y = 10; 
$xc = 20; 
$yc = 20; 
$r = (20)/ 2; 
$xc = $w * (($x - $xmin)/($xmax - $xmin)) - $r . "<br>"; 
$yc = $h * (($ymax - $y)/($ymax - $ymin)) -$r; 
$tr =''; 
$data = array("120|90","345|456","45|66","45|45"); 
foreach($data as $value){ 
    $new = explode("|",$value); 
    $tr .='<a href="#" style="top:'.$new[0].'px; left:'.$new[1].'px;" class="dot"></a>'; 
} 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

    <style type="text/css"> 
#most_engaged_graph{ 
width:968px; 
height:432px; 
background-color:#CCCCCC; 
} 
a.dot { 
height:20px; 
width:20px; 
position:absolute; 
background-color:#0033FF; 
} 
</style> 
</head> 
<body> 
<div id="most_engaged_graph"> 
<?=$tr?> 
</div> 
</body> 
</html>

출처

2010-12-20 r1400304

도트 피치는 20px입니다. 그래프의 왼쪽 하단 모서리를 원점으로하여 (0,0)으로 지정해야합니다.

설명하지 않은 축의 축척을 알아야합니다. 축에 거리 당 픽셀 수를 결정하십시오.

각 포인트 P(x,y)의 원하는 위치를 화면상의 위치로 변환해야합니다. .dot의 가운데 픽셀이 그 위치에 있도록하고 싶습니다.

화면 좌표가 왼쪽 하단이 아닌 왼쪽 상단에서부터 실행될 때 수직 픽셀을 반전시켜 최대 값이 0이되고 그래프의 높이가 0 (또는 전체 음수)이되도록 플러스/마이너스 두 경우 모두 도트 크기의 절반입니다.

을 감안할 때 :

W = graph width (px), H = graph height (px)
Xmin = minimum x axis, Xmax = maximum x axis
Ymin = minimum y axis, Ymax = maximum y axis
x = x value on graph (Xmin <= x <= Xmax), y = y value on graph (Ymin <= y <= Ymax)
Xc = x-center of dot, Yc = y-center of dot
r = dot radius = (dot width)/2

그런 다음 16,

Xc = W * [(x - Xmin)/(Xmax - Xmin)], Yc = H * [(Ymax - y)/(Ymax - Ymin)]
left = Xc - r, top = Yc - r

테스트되지 않은, 나는 그 잘 생각 - 조정이 필요할 수 있습니다. 특히 도트가 전체 그래프 (축 전체에 적용됨)에 나타나야하는 경우 을 W과 H에서 뺍니다.

예제 코드 :

<div id="most_engaged_graph"> 
<?php 
$dataPoints = array(
        array('x' => 5, 'y' => 20), 
        array('x' => 80, 'y' => 50), 
        array('x' => 45, 'y' => 5), 
        array('x' => 68, 'y' => 89), 
        array('x' => 22, 'y' => 43) 
      ); 

foreach ($dataPoints as $cPoint) { 
    // Assuming $w, $h, $xmin, $ymin, $xmax, $ymax, $r are defined above 
    $xc = $w * (($cPoint['x'] - $xmin)/($xmax - $xmin)); 
    $yc = $h * (($ymax - $cPoint['y'])/($ymax - $ymin)); 

    $cLeft = $xc - $r; 
    $cTop = $yc - $r; 
?> 
    <a href="#" style="top: <?php echo $cTop; ?>px; left: <?php echo $cLeft; ?>px;" class="dot"></a> 
<?php 
} 
?> 
</div>

jQuery를 버전 데모 : 당신의 anwser에 대한 http://jsfiddle.net/75Mz5/1/

출처

2010-12-20 15:28:22 Orbling

나는 더 많은 것을 이해하기위한 코드를 편집한다. 나는 당신의 생각을 가지고 일하려고 노력한다. 그러나 내가 틀린 길에서 totaly를했다고 생각한다. 간단한 예제가 하나있다. 많은 도움을 주었다. – r1400304

@livetolearn : 코드를 보면, 계산 오른쪽. 하지만 그들을 사용하지 않는, 당신은 3 손을 HTML에 "도트"위치. 'top'과'left'에 대한 최종 값을 사용해야 할 필요가 있습니다.'Xc'의 끝 부분에 왜 '
'이 있는지 모르겠습니다. 또한'Xc'와'Yc'를 두 번 사용하여 약간의 오류가있었습니다. 나는 그것을 바로 잡을 것이다. – Orbling

@livetolearn : 또한 'Xmin, Xmax, Ymin, Ymax'에 대한 올바른 아이디어가 없을 수도 있습니다. 화면상의 픽셀이 아닌 그래프 축의 한계 (눈금)입니다. – Orbling

음, 정말로 두 부분이 있습니다. 먼저 규모를 확립해야합니다. 나는 전형적으로 극단보다 약간 더 많이한다. 그래서 만약 당신이 위쪽, 오른쪽, 왼쪽, 그리고 가장 아래쪽에있는 값을 취하고, 조금 더하거나 빼거나 10의 거듭 제곱에 맞추도록하십시오. 그런 다음 규모가 있습니다. 여기에서 수학을 사용하여 각 점의 위치를 결정할 수 있습니다. 단순히 가치 위치에있는 것이 아니라 차트에 맞게 확장해야합니다.

1000의 배율을 사용한다고 가정 해 보겠습니다. 그러나 차트의 크기는 100x100입니다.이 경우 각 픽셀의 개수는 10입니다. 따라서 값 40,40은 4,4에 위치합니다. 네 음모에.

또한 음수가 있음을 명심해야합니다. 플롯이 0-1000이 아닌 -500에서 500 인 경우 올바른 위치에 배치하려면 4,4에서 54,54로 이동해야합니다.

이렇게하면 나머지를 파악하는 데 도움이되기를 바랍니다.

출처

2010-12-20 15:03:57 DampeS8N

덕분에 당신은 내가 그 뜻을 쉽게 이해할 수있는 LANG에 대한 작은 공식을 쓸 수 있습니다 도움이 될 – r1400304

불행히도 없습니다. 그것은 당신이 그것을 어떻게 끝내고 당신이 지원하기를 원하는지에 상당히 의존 할 것입니다. 그러나 위와 같은 모양입니다. Offset = (value + | negative boundary |)/(range/window_size) 원점은 좌상단이라고 가정합니다. – DampeS8N

분산 형 차트 수식

답변

관련 문제