散点图公式答案

【问题标题】：scatter chart formula散点图公式
【发布时间】：2011-05-28 07:21:34
【问题描述】：

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

【问题讨论】：

标签： php math charts

【解决方案1】：

嗯，实际上有两个部分。首先，你必须建立一个规模。我通常做的比极端的要多一些。因此，如果您取顶部、右侧、左侧和最底部的值，请加/减一点或使其适合 10 的幂。然后你有一个规模。从这里，您可以使用数学来决定每个点的位置。它不只是在价值位置，您必须对其进行缩放以适合图表。

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

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

希望这可以帮助您解决剩下的问题。

【讨论】：

感谢您的回答，您能用我能轻松理解的任何语言编写一个小公式，这将很有帮助
很遗憾没有。这在很大程度上取决于你最终如何做以及你想要支持什么。但上面看起来像。偏移量 = (value + |negative boundary|) / (range / window_size) 假设原点是左下角，而不是你正在做的左上角。

【解决方案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

未经测试，我认为这是正确的 - 可能需要调整。特别是，如果您需要点完全出现在该区域内（适用于整个图形、轴等），请从 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/

【讨论】：

我编辑代码以更了解我尝试使用您的想法，但我认为我完全以错误的方式完成了它，您可以给我一个简单的工作示例，非常感谢您的帮助
@livetolearn：看看你的代码，你的计算是正确的。但是没有使用它们，您在 HTML 中有 3 个手动定位的“点”。您需要使用top 和left 的最终值，我也不知道为什么<br> 在Xc 的末尾。另外，我两次使用Xc 和Yc 时犯了一个小错误。我现在会更正。
@livetolearn：此外，您可能对Xmin, Xmax, Ymin, Ymax 没有正确的想法，它们是图形轴限制（比例），而不是屏幕上的像素。
我不知道如何在 html 代码中使用 php 代码我应该创建一个数字数组并运行一个循环并显示循环中的所有内容，但我不知道如何使用我从你那里制作的这段代码想法
得到了很多yyyyyyyyy 谢谢我想现在我终于知道图表是如何工作的了