Создание графика средствами библиотеки GD

Создание линейного графика средствами библиотеки GD

Для создания линейного графика нам следует познакомиться с несколькими полезными функциями библиотеки GD. В первую очередь нам понадобятся инструменты для рисования линий. Для этого существует функция imageline (int im, int x1, int y1, int x2, int y2, int col), которой в качестве параметров нужно передать идентификатор созданной уже области рисования, координаты начальной и конечной точек, а также цвет линии. Для графика, нам понадобятся координатные оси, которые заканчиваются стрелками. Для их отрисовки понадобится еще одна функция, создающая замкнутый многоугольник произвольной формы. Она имеет следующий формат вызова:
imagefilledpolygon(int im, array points, int num_points, int col),
где im - идентификатор области рисования, points - массив,
содержащий координаты точек многоугольника (arr[0]=x0; arr[1]=y0; arr[2]=x1; и т. д.),
num_points - количество точек полигона,
col - цвет заполнения.
Аналогичная функция - imagepolygon -предназначена для создания незакрашенного многоугольника.

Приступим к написанию скрипта. Создадим новый файл и назовем его line_chart.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; //максимальное значение оси
//координат по X в пикселах
$maxY=$im_heignt-$y0; //максимальное значение оси
//координат по Y в пикселах
//рисуем ось X
imageline($im, $x0, $maxY, $maxX, $maxY, $black);
//рисуем ось Y
imageline($im, $x0, $y0, $x0, $maxY, $black);
//рисуем стрелку на оси X
$xArrow[0]=$maxX-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; $yArrow[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; //определяем количество
//шагов по оси X
$ySteps=($maxY-$y0)/$yStep-1; //определяем количество
//шагов по оси Y
//выводим сетку по оси X
for($i=1;$i<$xSteps+1;$i++){
   imageline($im, $x0+$xStep*$i, $y0, $x0+$xStep*$i,$maxY-1, $l_grey);
   //при необходимости выводим значения линий сетки по оси X
   imagestring($im, 1, ($x0+$xStep*$i)-1, $maxY+2, $i*$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);
   }
}

Теперь можно приступить к рисованию самого графика. Создаваться изображение будет вызовом отдельной функции, которой передаются массивы координат X и 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);
$white = ImageColorAllocate ($im, 255, 255, 255);
$black = ImageColorAllocate ($im, 0, 0, 0);
$red = ImageColorAllocate ($im, 255, 0, 0);
$green = ImageColorAllocate ($im, 0, 255, 0);
$blue = ImageColorAllocate ($im, 0, 0, 255);
$yellow = ImageColorAllocate ($im, 255, 255, 0);
$magenta = ImageColorAllocate ($im, 255, 0, 255);
$cyan = ImageColorAllocate ($im, 0, 255, 255);
$l_grey = ImageColorAllocate ($im, 221, 221, 221);
//рисуем оси координат
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,$y2);
//получаем максимальные значения
//элементов для каждого массива
$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);
//рисуем второй график
draw_data($x2,$y2,4,$blue);
//выводим рисунок
Header("Content-Type: image/png");
ImagePNG($im);
//освобождаем занимаемую рисунком память
imagedestroy($im);

Отображение графика в браузере:

echo "<center><img src="grafic.php"></center>";

Смотрите также: Создание круговой диаграммы

Всего за 250 рублей (~3$) Вы можете приобрести представленный здесь пример построения графика. Код скрипта реализован на PHP, полностью открытый и не использует никаких дополнительных библиотек.

Соглашение по использованию платной версии:
• Вы можете использовать полученный код в любых своих разработках, вы не обязаны указывать ссылку на источник.
• Вы НЕ имеете права перепродавать её, размещать в свободном или ограниченном доступе, а также публиковать в любом виде.
• Все остальные права сохраняются за автором.

Регистрация Войти Войти через VK Войти через FB Войти через Google Войти через Яндекс

При нажатии кнопки Оплатить и загрузить, Вы подтверждаете согласие с условиями использования скрипта, описанными на этой странице.
Вы будете перенаправлены на страницу выбора способа оплаты, после оплаты 250 рублей (~3$) начнется загрузка файла.
Чтобы мы не потеряли Вашу оплату при потере соединения, укажите Ваш действующий
адрес электронной почты
Сомневаетесь? Вы всегда сможете задать вопросы и получить помощь.

.
Прокомментировать/Отблагодарить