Создание линейного графика средствами библиотеки 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=x0; arr=y0; arr=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=$maxX-6; $xArrow=$maxY-2;
$xArrow=$maxX; $xArrow=$maxY;
$xArrow=$maxX-6; $xArrow=$maxY+2;
imagefilledpolygon($im, $xArrow, 3, $black);
//рисуем стрелку на оси Y
$yArrow=$x0-2; $yArrow=$y0+6;
$yArrow=$x0; $yArrow=$y0;
$yArrow=$x0+2; $yArrow=$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
Сохраните этот файл под названием generate-random-data.php всё в той же папке.
Сначала мы инклудим файл подключения к базе. Затем устанавливаем временные рамки, из которых случайным образом будет выбираться время для регистрации пользователя. Вы можете изменить количество вставляемых строк. Для этого вам нужно подправить переменную $RecordsToInsert.
Потом мы запускаем скрипт вставки сгенерированных записей в базу данных. Для того, чтобы запустить этот процесс зайдите по этому адресу - http://localhost/fcdemo/generate-random-data.php.
В конце концов вы должны увидеть сообщение: «Вставлено {$RecordsToInsert} записей»
Шаг 2. Готовим скелет сайтаНам необходимо создать самую простую страницу для отображения нашей диаграммы. Что-то типа этого:
FusionCharts v3.2 - LinkedCharts PHP Demo
