散點圖公式

我想在CSS和少量點圖像的網頁上創建一個散點圖。我已經成功地創建了設計，但是現在我無法弄清楚散點圖實際上是如何工作的。任何人都可以提供我任何想法，我可以如何安排他們？我的圖表的寬度是968和高度432 這樣的圖表散點圖公式

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

我不能用這一點，但我想知道它是如何工作

感謝您的幫助。

<?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的中心像素位於該位置。因爲屏幕座標是從左上角開始的，而不是左下角，所以您需要反轉垂直像素，因此最大值爲零，而零（或全負）是圖形的高度，加/減在這兩種情況下，你的點的大小都是它的一半

考慮：

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

然後：

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

未經檢驗的，我認爲這是正確的 - 可能需要調整。特別是，如果需要點完全顯示在區域內（適用於整個圖表，axis等），則從W和H中減去2r。

示例代碼：

<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的版本演示：http://jsfiddle.net/75Mz5/1/

來源

2010-12-20 15:28:22 Orbling

我編輯的代碼爲更多的理解，我嘗試處理你的想法，但我認爲我做了錯誤的方式totaly你能有我一個簡單的工作示例很多謝謝你的幫助 – r1400304 2010-12-20 18:17:28

@livetolearn：看你的代碼，你有計算正確。但是沒有使用它們，你有3個手在HTML中定位「點」。你需要使用'top'和'left'的最終值，我不知道你爲什麼在'Xc'結尾還有'
'。另外，我使用'Xc'和'Yc'兩次犯了一個小錯誤。我現在會糾正這一點。 – Orbling 2010-12-20 18:26:14

@livetolearn：另外，你可能對'Xmin，Xmax，Ymin，Ymax'沒有正確的想法，它們是圖形軸限制（比例），而不是屏幕上的像素。 – Orbling 2010-12-20 18:29:50

那麼，真的有兩個部分。首先你必須建立一個規模。我通常比極端情況略高一點。所以，如果你取得最高，最低，最低和最低的價值，那麼增加/減少一點或者使它適合十的冪。然後你有一個規模。從這裏，你可以使用數學來決定每個點的位置。它不只是在價值的位置，你必須縮放它以適應圖表。

因此，假設您的規模是1000乘以1000.但是您的圖表只有100乘以100.在這種情況下，每個像素都會計爲10.因此，值40,40將位於4,4在你的情節。

您還需要記住負數的存在。如果圖是-500到500而不是0到1000，則需要將4,4移動到54,54以將它們放置在正確的位置。

希望這可以幫助您找出其他問題。

來源

2010-12-20 15:03:57 DampeS8N

感謝您anwser你能在任何郎寫一個小公式，我可以很容易地理解這種意願有幫助 – r1400304 2010-12-20 15:10:38

不幸的是沒有。它將很大程度上取決於你如何最終做到這一點以及你想要支持什麼。但上面看起來像。偏移量=（值+ |負邊界|）/（範圍/窗口大小）假設左下角的原點，而不是左上角。 – DampeS8N 2010-12-20 15:27:38

回答

相關問題