Главная

Новости

Статьи и обзоры
  Горожанин
  Обнинск в Internet
  Web Design
  Hardware
  Software
  Безопасность
  Серфинг
  Игродром
  Relax
  Технологии
  Web-обзор
  Интернет-ликбез
  Опросник
  УП-Технологии
  ART.net

Ссылки

Архив

О нас

Контакты

Форумы

POPULAR.RU

ГРАФИКА В РНР: СОЗДАЕМ И МЕНЯЕМ РИСУНКИ

Андрей Гончаренко
начало в: #33(145),#34(146)

Приступим к написанию скрипта. Создадим новый файл и назовем его line_chart.php. Для начала определим функцию отрисовки осей координат, которой будем передавать ширину и высоту области рисования. Так как мы планируем в дальнейшем выводить подписи значений, откладываемых по осям, то необходимо учесть этот фактор и, соответственно. немного сместить относительно центра точку, обозначающую начало координат. Вот как может выглядеть искомая функция:

<?php
function draw_axises($im_width, $im_heignt)
{
global $im, $black, $l_grey, $x0, $y0, $maxX, $maxY;

$x0=25.0; //начало оси координат по X
$y0=20.0; //начало оси координат по Y
$maxX=$im_width-$x0; //максимальное значение оси
//координат по Х в пикселах
$maxY=$im_heignt-$y0; //максимальное значение оси
//координат по Y в пикселах
//рисуем ось Х
imageline($im, $x0, $maxY, $maxX, $maxY, $black);

//рисуем ось Y
imageline($im, $x0, $y0, $x0, $maxX, $black);

//рисуем стрелку на оси Х
$xArrow[0]=$max-6; $xArrow[1]=$maxY-2;
$xArrow[2]=$maxX; $xArrow[3]=$maxY;
$xArrow[4]=$maxX-6; $xArrow[5]=$maxY+2;
imagefilledpolygon($im, $xArrow, 3, $black);

//рисуем стрелку на оси Y
$yArrow[0]=$x0-2; $yArrow[1]=$y0+6;
$yarrow[2]=$x0; $yArrow[3]=$y0;
$yArrow[4]=$x0+2; $xArrow[5]=$y0+6;
imagefilledpolygon($im, $yArrow, 3, $black);
}
Еще одним важным атрибутом графика является координатная сетка. Для ее создания напишем еще одну функцию, которой в качестве параметров будем передавать величину шага в пикселах по осям X и Y и расстояние между линиями сетки для каждой из осей:

function draw_grid($xStep, $yStep,$xCoef, $yCoef)
{
global $im, $black, $l_grey, $x0, $y0, $maxX, $maxY;
$xSteps=($maxX-$x0)/$xStep-1; //определяем количество
//шагов по оси Х
$ySteps=($maxY-$y0)/$yStep-1; //определяем количество
//шагов по оси Y
//выводим сетку по оси Х
for($i=1; $i<$xSteps+1; $i++)
{
imageline($im, $x0+$xStep*$i, $y0, $x0+$xStep*$i,
$maxY-1, $l_grey);
//при необходимости выводим значение линий сетки
//по оси Х
ImageString($im, 1, ($x0+$xStep*$i)-1, $maxY+2,
$i8$xCoef, $black);
//выводим сетку по оси Y
for($i=1; $i,$ySteps+1; $i++)
{
imageline($im, $x0+1, $maxY-$yStep*$i, $maxX,
$maxY-$yStep*$i, $l_grey);
//при необходимости выводим значения линий сетки
//по оси Y
ImageString($im, 1, 0, ($maxY-$yStep*$i)-3,
$i*$yCoef, $black);
}
}
}

Теперь можно приступить к рисованию самого графика. Создаваться изображение будет вызовом отдельной функции, которой передаются массивы координат Х и Y, количество элементов в массивах и цвет данного графика. Вот как это можно реализовать:

function draw_data($data-x, $data_y, $points_count, $color)
{
global $im, $x0, $y0, $maxY, $scaleX, $scaleY;
for($i=1; $i<$points_count; $i++)
{
//рисуем линейный график по точкам из массивов данных
imageline($im, $x0+$data_x[$i-1]*$scaleX,
$maxY-$data_y[$i-1]*$scaleY,
$x0+$data_x[$i]*$scaleX,
$maxY-$data_y[$i]*$scaleY, $color);
}
}

Итак, все подзадачи создания графика решены. Теперь воспользуемся созданными нами функциями для непосредственного формирования изображения:

//создаем рисунок шириной 500 и высотой 400 пикселов
$im = @ImageCreate(500, 400);
include "color.inc";
//рисуем оси координат
draw_axises(500, 400);
//задаем массивы данных графиков
$x1[0]=1; $y1[0]=1;
$x1[1]=2; $y1[1]=4;
$x1[2]=3; $y1[2]=8;
$x1[3]=4; $y1[3]=16;

$x2[0]=1.5; $y2[0]=1;
$x2[1]=2.5; $y2[1]=4;
$x2[2]=3.5; $y2[2]=8;
$x2[3]=4.5; $y2[3]=16;
//объединяем данные из массива данных
//для вычисления масштаба
$x=array_merge($x1, $x2);
$y=array_merge($y1, $x2);
//получаем максимальные значения
//элементов для каждого массива
$maxXVal=max($x);
$maxYVal=max($y);
//вычисляем масштаб преобразования данных
//в координаты рабочей области
$scaleX=($maxX-$x0)/$maxXVal;
$scaleY=($maxY-$y0)/$maxYVal;
//задаем шаг для координатной сетки в пикселах
$xStep=30;
$yStep=30;
//рисуем координатную сетку
draw_grid($xStep, $yStep,
round($xStep/$scaleX, 1),
round($yStep/$scaleY, 1),
true);
//рисуем первый график
draw_data($x1, $y1, 4, $red);
//рисуем второй график
draww_data($x2, $y2, 4, $blue);
//выводим рисунок
ImagePNG($im);
//освобождаем занимаемую рисунком память
imagedestroy($im);
?>

Отображение графика в браузере осуществляется точно также, как и в первом примере:
<?php
include "header.tpl";
echo "<center><img src=\"line_chart.php\"></center>";
include "footer.tpl";
?>

Окончание следует