Рисование графиков
Построение графиков на PHP возможно двумя способами. Можно нарисовать самостоятельно или использовать какую-нибудь библиотеку. Я предлагаю научиться создавать графики самим. Во-первых, потому что хорошие библиотеки являются платными. Во-вторых, используя любую библиотеку, вы ограничены её функционалом. Лучше рисовать графики самостоятельно.
Для начала рассмотрим самый простой вариант. Есть массив, содержащий количество пользователей, которые зарегистрировались на сайте за 5 дней.
Выведем этот массив на страницу в виде графика. Сначала нарисуем оси координат.
Рисунок должен выглядеть так:
Чтобы нарисовать линию на графике, нужно найти на нём точки, по которым линия будет строиться. На практике можно сразу находить точку и рисовать по ней линию. Но чтобы пример был более понятным, мы разделим задачу на две части. Сначала найдём все точки, потом нарисуем по ним график. Для этого создадим двухмерный массив, в котором будут координаты x и y каждой точки. Для поиска координат нам нужна точка отсчёта. Это та точка, в которой пересекаются оси координат. В нашем рисунке она имеет координаты
Для определения положения каждой точки нужно использовать масштаб графика. В примере мы задали масштаб сами. По оси x для каждого дня создано 100 пикселей. Первый день находится на расстоянии 100 пикселей от начала отсчёта, второй на расстоянии 200 пикселей и так далее. Значит координата x
для первого дня: 50 + 100 = 150
По оси Y для каждых 10 пользователей выделено 100 пикселей. Значит для одного пользователя — 10 пикселей. Нужно учитывать, что у изображения ось Y направлена вниз, значит нужно не прибавлять значение к точке отсчёта, а вычитать. В первый день на сайте зарегистрировались 2 посетителя.
Координата для этого значения равна: 250 — (2 * 10) = 230
Для второго дня: 250 — (7 * 10) = 180
Массив с координатами точек получается такой:
$mas = array(2, 7, 20, 9, 14); $points = array( array ('x' => 150, 'y' => 230), array ('x' => 250, 'y' => 180), array ('x' => 350, 'y' => 50), array ('x' => 450, 'y' => 160), array ('x' => 550, 'y' => 90) ); Теперь по ним построим график. Для этого запустим цикл, в котором будем рисовать линии по соседним точкам:
$green = imageColorAllocate($image, 50, 237, 35); //цвет графика imageSetThickness($image, 2); //толщина линий $num_points = count($points); for ($i=0; $i
Мы рассмотрели самый простой вариант построения графика. Я заранее знал количество дней и максимальное число пользователей. Поэтому я сам выбрал масштаб графика. Но обычно эти данные могут быть разными и масштаб нужно расчитывать.
И сам график выглядит немного иначе. Нам привычно, что оси координат начинаются с нуля. Но для удобства отображения это правило иногда не соблюдается. Ось X начинается не с 0, а с 1, чтобы слева от линии не было пустого пространства. А ось Y показывается так, чтобы на график поместились все значения. Например, если минимальное значение: 60, а максимальное: 70, то ось Y содержит именно такой диапазон. Рассмотрим создание такого графика. Создадим для этого новый скрипт.
В примере ось X имеет длину 520 пикселей. Её нужно разделить на одинаковые сегменты для каждого дня. Ось X начинаться не с 0, а с 1. Поэтому сегмента между 0 и 1 не будет и количество сегментов становится на 1 меньше. Если дней 5, то получится 4 сегмента. Формула расчёта такая:
длина сегмента = длина оси / (число дней — 1)
Число может получится дробное, поэтому результат нужно округлить в меньшую сторону.
header('Content-type: image/png'); $regusers = array(2, 7, 20, 9, 14); $segments_x = count($regusers); //количество сегментов $lengthsegment_x = floor((570-50)/($segmentx_x - 1)); //длина сегмента 570 — 50 это длина оси X . Она зависит от размеров изображения.
Ось Y делаем такой, чтобы поместились все значения. Нужно получить минимальное и максимальное значения. Они должны занять всю высоту графика. Зная диапазон, мы сможем рассчитать, сколько пикселей должно соответствовать одному пользователю на графике.
диапазон = максимальное — минимальное
длина сегмента = длина оси / диапазон
Полученное число также нужно округлить.
$max = max($regusers); $min = min($regusers); $lengthsegment_y = floor((250-50)/($max - $min));
Сами оси рисуем, как в предыдущем примере:
$image = imageCreateTrueColor(600, 280); $white = imageColorAllocate($image, 255, 255, 255); imagefilledrectangle($image, 0, 0, 599, 279, $white); $blue = imageColorAllocate($image, 0, 0, 255); imageLine($image, 50, 250, 570, 250, $blue); imageLine($image, 50, 50, 50, 250, $blue);
Поставим засечки и напишем числа:
for ($i=1; $i 1) imageLine($image, $x, 246, $x, 249, $blue); imagestring($image, 5, $x-1, 255, "$i", $blue); >
15 — цикл для каждого дня. Нулевого значения не будет
17 — координата X для засечки. 50 — это точка отсчёта
18 — для первого дня засечки не нужно, он находится в начале оси X
На оси Y не будем ставить засечки для каждого сегмента. Поставим на максимуме и в середине:
$y = 250 - $lengthsegment_y * ($max - $min); imageLine($image, 51, $y, 54, $y, $blue); $num = $max; imageString($image, 5, 30, $y-5, "$num", $blue); $y = 250 - $lengthsegment_y * floor(($max-$min) / 2); imageLine($image, 51, $y, 54, $y, $blue); $num = $min + floor(($max - $min) / 2); imageString($image, 5, 30, $y-5, "$num", $blue); $num = $min; imageString($image, 5, 30, 241, "$num", $blue);
22 — координата Y для засечки. 250 — это точка отсчёта. У изображений ось Y направлена вниз, поэтому не прибавляем к точке отсчёта, а вычитаем. При расчёте координаты Y всегда будем отнимать минимальное значение в массиве. Тогда график опуститься вниз, и минимальное значение на графике совпадёт с точкой отсчёта
24 — число, которое нужно написать
Остальные цифры ставятся таким же способом.
Строим график. Координаты точек, по которым будем рисовать линии, определяются так:
x = точка отсчёта + номер дня * длина сегмента
y = точка отсчёта — (количество пользователей — минимальное значение) * длина сегмента
Запустим цикл, в котором соединим соседние точки:
$green = imageColorAllocate($image, 50, 237, 35); imageSetThickness($image, 2); for ($i=0; $i0) imageLine($image, $x1, $y1, $x2, $y2, $green); $x2 = $x1; $y2 = $y1; > imagepng($image); imagedestroy($image);
Результат должен выглядеть так:
Коприрование материалов сайта возможно только с согласия администрации
2017 — 2023 © basecourse.ru Все права защищены
Рисуем графики на PHP
Графики на страницах с помощью PHP необходимы во многих случаях — для создания опросов и голосований, статистики. Иногда можно использовать Google Api для создания графиков, иногда PHP. Исходя из этого, мы рассмотрим сегодня примеры различных графиков на PHP и Javascript.
В статье я буду использовать классы, изъятые из разных платных приложений, в некоторых случаях их использование разрешается, например, если вы их используете на бесплатном, некоммерческом сайте, более подробное описание лицензии можно найти на сайте http://www.pchart.net/license.
Возможности классов pChart
- множество геометрических фигур (круги, многоугольники, линии);
- поддержка теней для фигур;
- возможность использовать собственные ttf шрифты
- возможность лёгкой установки и настройки;
- рисование кривых;
- создание полупрозрачного эффекта для фигур и линий;
Скачать архив классов php для работы с рисованием графиков.
Пример простого графика нарисованного в php:
Для правильной работы класса создающиего риснуки графиков необходима следубщая структура директорий (скачать её можно в конце статьи):
./ index.php chart/ class/ data/ fonts/ palettes/ tmp/
- index.php — текший страница;
- class — директория с классами для рисования гарфиков;
- fonts — шрифты, которые вы можете использовать в графиках;
- цветовая схема графика;
- директория в которую помещаяется кэш файл и изображение;
Мы использовали функцию get_poll_pie_chart для того чтобы нарисовать круговую диаграмму. Вместо этой функции можно использовать следующие функции:
- get_timeline_chart — линейный график с равномерным отображением линии;
- get_poll_bar_chart — линейный график с динамическим отображением линии на графике;
Пример графика, созданного функцией get_poll_bar_chart :
Пример графика, созданного функцией get_timeline_chart :
Некоторые графики на php вполне возможно объединить с графиками из Google Charts. Например, круговой график в Google Charts полностью соответствует круговой диаграмме отображённой ранее на странице:
Пример использования графиков Google Charts
Один из возможных вариантов использования графиков Google Charts создание индикатора загрузки файла:
Для создания индикатора можно использовать следующий код:
gChart
Если Вам не хватило инструментов для работы с графиками и диаграммами то можете использовать класс php «gChart» от Google. Все нижеуказанные диаграммы и графики созданы с использованием «gChart».