ГРУППА КУРСА
|
Главная >
Учебник PHP >
Рисование графиковПостроение графиков на PHP возможно двумя способами. Можно нарисовать самостоятельно или использовать какую-нибудь библиотеку. Я предлагаю научиться создавать графики самим. Во-первых, потому что хорошие библиотеки являются платными. Во-вторых, используя любую библиотеку, вы ограничены её функционалом. Лучше рисовать графики самостоятельно. Для начала рассмотрим самый простой вариант. Есть массив, содержащий количество пользователей, которые зарегистрировались на сайте за 5 дней.
Выведем этот массив на страницу в виде графика. Сначала нарисуем оси координат.
Комментарии: 3 - создаём изображение 5 - фон 7, 8 - оси x и y 9-13 - засечки на оси x 14-18 - цифры на оси x 19, 20 - засечки на оси y 21, 22 - цифры на оси y Рисунок должен выглядеть так: ![]() Чтобы нарисовать линию на графике, нужно найти на нём точки, по которым линия будет строиться. На практике можно сразу находить точку и рисовать по ней линию. Но чтобы пример был более понятным, мы разделим задачу на две части. Сначала найдём все точки, потом нарисуем по ним график. Для этого создадим двухмерный массив, в котором будут координаты x и y каждой точки. Для поиска координат нам нужна точка отсчёта. Это та точка, в которой пересекаются оси координат. В нашем рисунке она имеет координаты x: 50 y: 250 Для определения положения каждой точки нужно использовать масштаб графика. В примере мы задали масштаб сами. По оси x для каждого дня создано 100 пикселей. Первый день находится на расстоянии 100 пикселей от начала отсчёта, второй на расстоянии 200 пикселей и так далее. Значит координата x для первого дня: 50 + 100 = 150 для второго: 50 + 200 = 250. По оси Y для каждых 10 пользователей выделено 100 пикселей. Значит для одного пользователя - 10 пикселей. Нужно учитывать, что у изображения ось Y направлена вниз, значит нужно не прибавлять значение к точке отсчёта, а вычитать. В первый день на сайте зарегистрировались 2 посетителя. Координата для этого значения равна: 250 - (2 * 10) = 230 Для второго дня: 250 - (7 * 10) = 180 Массив с координатами точек получается такой:
Теперь по ним построим график. Для этого запустим цикл, в котором будем рисовать линии по соседним точкам:
График выглядит так: ![]() Мы рассмотрели самый простой вариант построения графика. Я заранее знал количество дней и максимальное число пользователей. Поэтому я сам выбрал масштаб графика. Но обычно эти данные могут быть разными и масштаб нужно расчитывать. И сам график выглядит немного иначе. Нам привычно, что оси координат начинаются с нуля. Но для удобства отображения это правило иногда не соблюдается. Ось X начинается не с 0, а с 1, чтобы слева от линии не было пустого пространства. А ось Y показывается так, чтобы на график поместились все значения. Например, если минимальное значение: 60, а максимальное: 70, то ось Y содержит именно такой диапазон. Рассмотрим создание такого графика. Создадим для этого новый скрипт. В примере ось X имеет длину 520 пикселей. Её нужно разделить на одинаковые сегменты для каждого дня. Ось X начинаться не с 0, а с 1. Поэтому сегмента между 0 и 1 не будет и количество сегментов становится на 1 меньше. Если дней 5, то получится 4 сегмента. Формула расчёта такая: длина сегмента = длина оси / (число дней - 1) Число может получится дробное, поэтому результат нужно округлить в меньшую сторону.
570 - 50 это длина оси X. Она зависит от размеров изображения. Ось Y делаем такой, чтобы поместились все значения. Нужно получить минимальное и максимальное значения. Они должны занять всю высоту графика. Зная диапазон, мы сможем рассчитать, сколько пикселей должно соответствовать одному пользователю на графике. диапазон = максимальное - минимальное длина сегмента = длина оси / диапазон Полученное число также нужно округлить.
Сами оси рисуем, как в предыдущем примере:
Поставим засечки и напишем числа:
Комментарии: 15 - цикл для каждого дня. Нулевого значения не будет 17 - координата X для засечки. 50 - это точка отсчёта 18 - для первого дня засечки не нужно, он находится в начале оси X 19 - рисуем засечку 20 - пишем цифру На оси Y не будем ставить засечки для каждого сегмента. Поставим на максимуме и в середине:
Комментарии: 22 - координата Y для засечки. 250 - это точка отсчёта. У изображений ось Y направлена вниз, поэтому не прибавляем к точке отсчёта, а вычитаем. При расчёте координаты Y всегда будем отнимать минимальное значение в массиве. Тогда график опуститься вниз, и минимальное значение на графике совпадёт с точкой отсчёта 23 - рисуем засечку 24 - число, которое нужно написать 25 - пишем число Остальные цифры ставятся таким же способом. Строим график. Координаты точек, по которым будем рисовать линии, определяются так: x = точка отсчёта + номер дня * длина сегмента y = точка отсчёта - (количество пользователей - минимальное значение) * длина сегмента Запустим цикл, в котором соединим соседние точки:
Результат должен выглядеть так: ![]() |