Портал для веб-мастера

Инструменты для Бизнеса

Вход пользователей
Поиск статей
WoWeb.ru » Статьи » Программирование для Web » PHP

Построение диаграмм средствами PHP4

PHP4 предоставляет возможность динамически формировать графические изображения...

Зачем нужны динамические изображения? Ведь существует множество графических пакетов, по возможностям намного опережающие возможности PHP. Да, изображения типа логотипов действительно не имеет смысла формировать динамически, так как такое изображение поступать в браузер медленнее обычного. А если необходимо вывести диаграмму? Данные постоянно изменяются...

Для осуществления всего этого необходимо установить PHP4 версии не ниже 4.3.х и библиотеку GD версии не ниже 2.х... Требования обычные - чем свежее версия, тем лучше. Как узнать о версиях?

Создаем файл phpinfo.php:

<?php phpinfo(); ?>

Запускаем http://localhost/phpinfo.php - или какой у вас там путь...

Смотрим самую верхнюю строку. Это версия PHP, к примеру, PHP Version 4.3.3. Ниже ищем заголовок таблицы gd. Это информация о графической библиотеке. Если у вас имеется строка типа GD Version bundled (2.0.15 compatible), то все в порядке, если нет, обновите. Если вообще нет таблицы gd - установите библиотеку gd. Если желаете знать о ней побольше - http://www.boutell.com/gd/.

Если у вас все в порядке, следуем далее.

Вначале о входных данных. Их можно взять из адресной строки браузера, из файла, из базы данных. Чтобы не усложнять код, в данном примере они помещены в начало кода. Допустим, это количество проданных товаров со склада. Видов товаров - всего четыре, но количество можно и поменять.

Создаем файл gd2.php:

<?php ?>

Так создаются все php-файлы. Наш файл gd2.php будет создавать две диаграммы в PNG-формате. Диаграммы бывают многих видов. У нас будет горизонтальная нормированная и обычную столбцовую. Объем создавать не будем. :)

Файл gd2.php условно делится на две части - входные данные с первичной обработкой и создание графического изображения.

Итак, входные данные:

 $goods[0]=30; $goods[1]=50; $goods[2]=100; $goods[3]=70;

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

Первый вид - горизонтальная нормированная. Здесь ширина рисунка обозначает общее количество, а удельный вес каждого вида обозначен по ширине отдельным цветом.

 $sum=0; foreach($goods as $a) {$sum=$sum+$a;} $count=count($goods)-1; for($i=0;$i<=$count;$i++) {$part[$i]=round($goods[$i]/$sum*500,0);}

В данном коде определяется общее количество проданных товаров и число видов товаров. В цикле for() рассчитывается ширина каждой части из расчета на рисунок шириной 500 пикселей. Как видно, ничего сложного - курс средней школы.

Второй вид - обычная столбцовая. Тут еще проще...

 $max=max($goods); for($j=0;$j<=$count;$j++) {$column[$j]=round($goods[$j]/$max*100,0);}

Определяется наибольший элемент массива. Столбец, означающий этот вид, будет высотой в 100 пикселей. Остальные будут пропорционально меньше.

Математическая часть завершена. Все необходимое для диаграмм получено.

Теперь можно приступать к графике.

 header("Content-type: image/png"); $img=ImageCreate(500,200); #Здесь создается заголовок png-файла и основа рисунка. $white=ImageColorAllocate($img,255,255,255); $red=ImageColorAllocate($img,255,0,0); $green=ImageColorAllocate($img,0,255,0); $blue=ImageColorAllocate($img,0,0,255); $gray=ImageColorAllocate($img,128,128,128); #Здесь определяются цвета. Разумеется, их может быть больше (и меньше). $color=array($red,$green,$blue,$gray); #Здесь создаем массив цветов - красный, зеленый, синий и черный. Порядок цветов - на ваш вкус. 

Все уже определено...

Осталось вывести первую диаграмму в верхней половине рисунка.

 $x1=0;$x2=0; for($i=0;$i<=$count;$i++) { $x2=$x1+$part[$i]; ImageFilledRectangle($img,$x1,20,$x2,80,$color[$i]); $x1=$x2; } 

В данной диаграмме Y-координаты не меняются. Надо рассчитать лишь Х-координаты. В строке $x2=$x1+$part[$i]; определяется ширина закрашенного участка для одного цвета. В следующей строке функции ImageFilledRectangle() рисует прямоугольник и закрашивает его цветом $color[], а строка $x1=$x2; определяет новое значение координаты Х1 - ведь конец предыдущего участка является началом следующего...

Теперь вторая диаграмма...

Она будет расположена в нижней части рисунка.

 $x=0; $y=0; $width=50; for($j=0;$j<=$count;$j++) { $y=199-$column[$j]; ImageFilledRectangle($img,$x,$y,$x+$width,199,$color[$j]); $x=$x+$width; } 

Здесь требуется задать еще и ширину столбца. В таких диаграммах столбцы имеют одинаковую ширину. Пусть она будет равной 50 пикселей. В большинстве случаях обычные столбцовые диаграммы направлены вверх. Поэтому основание столбцов будет на одном уровне, а верхняя грань - на разных. Для этой цели в код вставляем строку $y=199-$column[$j];. Функция ImageFilledRectangle() действует аналогично первому случаю. В строке $x=$x+$width; задается новое значение координаты Х. Столбцы будут касаться друг друга. Не нравится? Замените строкой $x=$x+$width+10;. Думаю, понятно для чего это надо.

Ну вот и все... Осталось вывести рисунок в браузер...

 ImagePNG($img);

Ничего сложного...

Хотя некоторые спросят: а как насчет круговых диаграмм. А также, как и нормированные. Только вместо линии - круг и дуги. Они создаются с помощью функции imagearc().

Чего-то не хватает, правда? Да... подписей к цветам. Это вполне реально и несложно. Только это материал для другой статьи. Иначе данная статья превратится в книгу... Если что-то не понятно в приведенных функциях, то обратитесь к мануалу. Там еще много полезного найдете.

Автор: pauk · Добавлена: 2005-01-25
Просмотров: 5002 · Рейтинг: 4.2

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Категории раздела
Flash
Apache
WWW
PhotoShop
Веб-дизайн
Раскрутка и реклама
Базы данных
3D графика
Хостинг
Истории веб-мастеров
Web-технологии
Сетевая безопасность
Программирование для Web
Операционные системы

Новые статьи
Лучшие статьи
Популярные статьи
Комментируемые статьи
Разделы сайта
Скрипты
Статьи
Шрифты
Флэш исходники
HTML шаблоны
Партнерки
Клипарты
Смайлы
Фоны
Гифы
Иконки
Опрос сайта
Ведете ли вы блог?
Всего ответов: 60296
Наша кнопка
WoWeb.ru - портал для веб-мастера