Question

我正在尝试使用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>

Answer 1

嗯，真的有两个部分。首先，你必须建立一个规模。我通常做的略多于极端。因此，如果您选择顶部，右侧，左侧和最底部的值，请添加/减去一点或使其适合10的幂。然后你有一个规模。从这里，您可以使用数学来确定每个点的位置。它不只是在值位置，你必须缩放它以适应图表。

所以，假设你有1000比1000的比例。但你的图表只有100比100.在这种情况下，每个像素将计为10.因此值40,40将位于4,4 on你的情节。

你还需要记住负数的存在。如果图是-500到500而不是0到1000，则需要移动4,4到54,54以将它们放置在正确的位置。

希望这有助于您了解其余部分。

Answer 2

你的点距是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

未经测试，我认为这是对的 - 可能需要调整。特别是，如果您需要在该区域内完全显示点（适用于整个图形，轴等），则从2r和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版本演示：http://jsfiddle.net/75Mz5/1/

散点图公式

2 个答案: