Ну, ваш шаг точки равен 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
Не проверено, я думаю, что это правильно - возможно, потребуется корректировка.В частности, вычтите 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/