Как правильно написать динамический график на php. Работаем с диаграммами. Что такое связные диаграммы

Всякому web-программисту приходится работать с изображениями – чисто текстовых сайтов в интернете немного. Самый простой способ поместить на страницу картинку – сохранить ее в файле и поставить в HTML-файле соответствующий тэг. Один из недостатков этого способа очевиден: картинки, которые лежат в файле никак не меняются, чтобы пользователь увидел другое изображение, вебмастеру нужно открыть графический редактор, внести измения и сохранить их. В этой статье я расскажу о создании динамических изображений с помощью языка web-программирования PHP.

Для начала – несколько слов для тех, кто не знаком с PHP. Это – язык сценариев, выполняющихся на стороне сервера для создания динамических web-страниц. Программа на PHP, подобно тексту на JavaScript, VBScript или ASP, вставляется в HTML-файл или сохраняется в отдельном файле с соответствующим расширением. Начало и конец программы отмечаются специальными тэгами . Текст вне этих скобок PHP не интерпретирует, он передается web-браузеру «как есть». Синтаксис PHP довольно подробно описан в руководстве, которое входит в комплект поставки (его также можно взять на сайте http://www.php.net).
Принцип работы с изображениями такой: PHP-программа (а точнее PHP-интерпретатор, работающий на стороне сервера) создает картинку «на лету» и передает ее браузеру в нужном графическом формате.
Для того чтобы воспользоваться возможностями PHP по работе с изображениями, необходимо установить в системе библиотеку GD. Если вы работаете с Linux, то эта библиотека уже должна быть установлена. Если нет – ее можно найти по адресу http://www.boutell.com/gd. Если вы работаете с Windows, то лучше всего посетить http://php.weblogs.com/easywindows. Здесь можно скачать библиотеку php_gd, которая позволит вам насладиться всеми прелестями работы с графикой на PHP. Если вы планируете использовать в своих изображениях шрифты TrueType, вам понадобится библиотека FreeType (http://www.freetype.org).
Несколько слов о поддерживаемых библиотекой GD графических форматах. Версии старше 1.6 поддерживают форматы GIF и JPEG. Более новые версии позволяют работать с JPEG и PNG. Начиная с версии 1.6 формат GIF в GD не поддерживается. Это связанно с тем, что всеми правами на алгоритм LZW-компрессии, использующийся в этом формате, обладает компания Unisys.

Итак, система настроена, все необходимые библиотеки установлены. Для начала создадим какое-нибудь простое изображение:

Сохраните текст в файле с расширением.php и просмотрите его с помощью браузера. Если вы все сделали правильно, то вы увидите то, что показано на рисунке 1.

рисунок 1

Рассмотрим код нашего скрипта более подробно. В первой строчке скрипт сообщает браузеру информацию о типе передаваемых данных с помощью HTTP-заголовка. В нашем примере используется предопределенный тип «image/gif», который означает, что далее последует изображение в формате GIF. Передавать браузеру соответствующий заголовок необходимо всегда. Для форматов JPEG и PNG первая строчка выглядела иначе:

Header(“Content-Type: image/jpeg”);
Header(“Content-Type: image/png”);

Обратите внимание, что заголовок “Content-Type” передается для каждой страницы только один раз, поэтому PHP-код для генерации изображения необходимо помещать в отдельный файл. Кстати, размещение динамической графики вместе с HTML-кодом возможно только при использовании механизма SSI (Server Side Includes), о чем мы поговорим чуть позже.
Создание графики в PHP состоит из четыре этапов:

создание дескриптора изображения;

регистрация используемых цветов;

рисование с использованием предопределенных функций;

и финальная стадия – создание изображения и передача его браузеру.

В нашем примере первый этап выглядит так:

$image = ImageCreate(500, 75);

Здесь функция ImageCreate() создает дескриптор изображения и присваивается его переменной $image. Функция вызывается с двумя параметрами – высотой и шириной изображения. По умолчанию изображение заливается черным цветом. Следующий этап – цвета:

Все используемые в изображении цвета необходимо регистрировать. Для этого используется функция ImageColorAllocate(); ее параметры – дескриптор изображения и RGB-кодировка цвета. Каждый цвет ставится в соответствие переменной, в дальнейшем эта переменная передается функциям рисования.
Вряд ли стоит перечислять все функции рисования. Скажу лишь, что их немало: вы можете «заливать» изображения цветом, рисовать различные фигуры, делать рисунок прозрачным и т.д. Рассмотрим некоторые из них на практике, а об остальных вы сможете узнать из документации.
В нашем первом примере мы «заливаем» изображение синим цветом с помощью функции

ImageFill:
ImageFill($image, 1, 1, $blue);

Второй и третий параметр – координаты начала заливки. Начало координат располагается в левом верхнем углу изображения. Таким образом, координаты (500, 75) определяют правый нижний угол изображения из первого примера.
Теперь следует передать готовый рисунок браузеру. Это делает функция ImageGIF(), ее единственный параметр – дескриптор изображения. Для форматов JPEG и PNG применяйте функции ImageJPEG() и ImagePNG() соответственно. Для освобождения памяти, выделенной под рисунок, в конце скрипта надо вызвать функцию ImageDestroy().

Рассмотрим еще одну возможность: попробуем что-нибудь написать на рисунке. Я приведу небольшой пример, а потом поясню механизм работы с текстом:

Результат выполнения скрипта показан на рисунке 2.

рисунок 2

Собственно выводом текста занимается функция itrings(). Ее параметры – дескриптор изображения, номер шрифта, координаты точки вывода изображения, строка текста и цвет. Можно использовать один из пяти предопределенных шрифтов фиксированного размера. Они нумеруются от 1 (самый маленький) до 5 (самый большой).
В следующем примере начинается самое интересное: изображение создается динамически на основе вводимых пользователем данных. Создадим простой HTML-файл с формой (рисунок 3).

рисунок 3

Вот его код:

Введите Ваше имя:

А теперь создадим такой файл example3.php:

Изображение будет содержать введенный текст (рисунок 4).

рисунок 4

Скажу пару слов и о других функциях из библиотеки GD, предназначенных для работы с текстом. itringUp() выводит текст вертикально; ImageChar() и ImageCharUp() выводят один символ; ImageFontHeight() и ImageFontWidth() возвращают высоту и ширину шрифта. Последние две функции используются в следующем примере, в котором строка текста подчеркивается линией (функция ImageLine рисует линии по заданным координатам):

Результат работы скрипта показан на рисунке 5.

рисунок 5

Естественно, кроме линий с помощью GD можно рисовать и другие фигуры. В следующем примере мы воспользуемся функцией ImageFilledRectangle() для того, чтобы вывести в окне браузера французский флаг. Функция предназначена для рисования заполненных определенным цветом прямоугольников. Для начала «зальем» весь рисунок белым цветом, а затем нарисуем красный и синий прямоугольники:

На рисунке 6 можно видеть результат наших трудов.

рисунок 6

PHP позволяет рисовать и другие типы многоугольников. Для этого имеется функция ImagePolygon(). Следующий пример выводит на экран пятиугольник. В качестве параметров (кроме дескриптора изображения и цвета линии) этой функции передается следующая информация: количество вершин (в нашем случае – пять) и массив координат точек, являющихся вершинами. Результат работы скрипта представлен на рисунке 7.

рисунок 7

В этом же скрипте используется еще одна функция, не упоминавшаяся ранее – ImageFillToBorder(). Она используется для заливки области, ограниченной определенным цветом (в нашем случае это синяя линия многоугольника).
Функция ImageArc() умеет рисовать дуги и окружности. Приведу небольшой пример (см. рисунок 8):

рисунок 8

Меняя значения переменных $width и $height, можно рисовать овалы, а меняя углы – добиться отображения различного рода дуг.

Библиотека GD позволяет не только рисовать картинки, но и пользоваться уже готовыми. Рассмотрим вполне реальную ситуацию: штатный дизайнер вашей фирмы разработал внешний вид кнопок для некоторого сайта, а вам надо поместить на странице несколько одинаковых по дизайну кнопок и подписи к ним.
В состав библиотеки GD входят такие функции, как ImageCreateFromGIF(), ImageCreateFromJPEG() и ImageCreateFromPNG(). Они помогут в тех случаях, когда надо создать новое изображение на основе уже существующего. Пусть у нас имеется файл button.gif (рисунок 9), который содержит гениальный дизайн кнопки для сайта. Ниже приводится PHP-код, который делает готовые кнопки на основе этого файла. Обратите внимание на то, как размеры кнопки, шрифта, и строк текста используются для вычисления координат размещения заголовков. Здесь в качестве подписи к кнопке берется значение переменной $caption, которая передается в скрипт извне:

рисунок 9

Функции iX() и iY() возвращают, соответственно, ширину и высоту изображения. Также существует функция Getiize(), с помощью которой можно определить размеры и тип изображения.
Сам по себе приведенный выше скрипт большой практической ценности не имеет, но его можно использовать в любой HTML-странице посредством SSI или так, как описано в следующем коде:

Мы рассмотрели самый простой вариант построения графика. Я заранее знал количество дней и максимальное число пользователей. Поэтому я сам выбрал масштаб графика. Но обычно эти данные могут быть разными и масштаб нужно расчитывать. И сам график выглядит немного иначе. Нам привычно, что оси координат начинаются с нуля. Но для удобства отображения это правило иногда не соблюдается. Ось x начинается не с 0, а с 1, чтобы не слева от линии не было пустого пространства. А ось y показывается так, чтобы на график поместились все значения. Например, если минимальное значение - 60, а максимальное - 70, то ось y содержит именно такой диапазон. Рассмотрим создание такого графика.

В примере ось x имеет длину 570 пикселей. Её нужно разделить на одинаковые сегменты для каждого дня. Ось x начинаться не с 0, а с 1. Поэтому сегмента между 0 и 1 не будет и количество сегментов становится на 1 меньше. Если дней 5, то получится 4 сегмента. Формула расчёта длины сегмента такая:

длина = длина оси / (число дней - 1)

Число может получится дробное, поэтому результат нужно округлить в меньшую сторону.

570 - 50 это длина оси x . Она зависит от размеров изображения.

Ось y делаем такой, чтобы поместились все значения. Нужно получить минимальное и максимальное значения. Они должны занять всю высоту графика. Зная диапазон, мы сможем рассчитать, сколько пикселей должно соответствовать одному пользователю на графике.

диапазон = максимальное - минимальное

длина = длина оси / диапазон

Полученное число также нужно округлить.