散点图公式
我想在CSS和少量点图像的网页上创建一个散点图。我已经成功地创建了设计，但是现在我无法弄清楚散点图实际上是如何工作的。任何人都可以提供我任何想法，我可以如何安排他们？我的图表的宽度是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>
那么你的点距是20px正方形，你需要将它们放在图的左下角作为原点(0,0)。
你需要知道的轴，这还没有陈述的规模。决定轴上每个距离的像素数。
然后你需要为你所希望的每个点P(x,y)的位置转换，在屏幕上的位置。您希望.dot的中心像素位于该位置。因为屏幕坐标是从左上角开始的，而不是左下角，所以您需要反转垂直像素，因此最大值为零，而零（或全负）是图形的高度，加/减在这两种情况下，你的点的大小都是它的一半
考虑：
W = graph width (px), H = graph height (px)Xmin = minimum x axis, Xmax = maximum x axisYmin = minimum y axis, Ymax = maximum y axisx = x value on graph (Xmin <= x <= Xmax), y = y value on graph (Ymin <= y <= Ymax)Xc = x-center of dot, Yc = y-center of dotr = 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/
那么，真的有两个部分。首先你必须建立一个规模。我通常比极端情况略高一点。所以，如果你取得最高，最低，最低和最低的价值，那么增加/减少一点或者使它适合十的幂。然后你有一个规模。从这里，你可以使用数学来决定每个点的位置。它不只是在价值的位置，你必须缩放它以适应图表。
因此，假设您的规模是1000乘以1000.但是您的图表只有100乘以100.在这种情况下，每个像素都会计为10.因此，值40,40将位于4,4在你的情节。
您还需要记住负数的存在。如果图是-500到500而不是0到1000，则需要将4,4移动到54,54以将它们放置在正确的位置。
希望这可以帮助您找出其他问题。
我编辑的代码为更多的理解，我尝试处理你的想法，但我认为我做了错误的方式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