PHP. Создание графических изображений. Часть Третья.

Ниже приведен сценарий, создающий кнопку, но, для того чтобы он реально заработал, его необходимо использовать в контексте Web-страницы. Самые первые шаги, которые необходимо предпринять для этого, показаны в листинге 25.2. Для этого был создан массив из четырех текстовых обозначений кнопок. А затем они просматриваются в цикле, в каждой итерации которого создается тег изображения. Исходным текстом для изображения является предыдущий сценарий.
Для установки определенного размера и текста сценарию передаются определенные параметры. По умолчанию был задан шрифт, но и его тоже можно задавать динамически. Результат работы сценария представлен на рис. 25.2.

Листинг 25.2. Динамическое создание кнопок

<?php
//задать обозначения кнопок $label = array("HOME", "ABOUT US",
"OUR PRODUCTS", "CONTACT US");
// отобразить все кнопки foreach($label as $text)
{
//сделать ссылку на эту страницу print("<a href="$SERVER['PHP_SELF']}">"); //создать тег динамического изображения print("<img src="25-1.php"); print("?label=" . htmlentities($text)); print("&amp,-width=145"),-print("&amp;height=25"); print("" border="0"");
print("width="145" height="25">");
print("</a><br>n");
}
?>

25.2. Динамическое создание графиков
Наиболее вероятным использованием динамической графики является создание графиков. Так как графики основываются на данных, в процессе создания они опираются на формулы. Если данные изменяются довольно часто, есть смысл возложить на PHP обязанности генерировать графики. В следующих примерах данные задаются статически, но решение задачи выборки данных из базы данных не представляет собой большой проблемы. Отправка больших объемов данных с помощью формы непрактична. Метод GET накладывает сравнительно небольшое ограничение на общий размер URL, который для различных Web-серверов различается. Однако можно воспользоваться методом POST. Далее вашему вниманию представляются два примера построения гистограммы и круговой диаграммы. В них используются одни и те же исходные данные, которые являются исследованием предпочитаемого типа пищи.
25.3. Гистограммы
Гистограммы являются отличным инструментом, предназначенным для сравнения значений. Их создание является относительно простой задачей, так как все данные представляются в виде прямоугольников. Высота прямоугольника соответствует его значению. Для преобразования используется коэффициент масштабирования. В листинге 25.3 граф имеет высоту 200 пикселей и коэффициент масштабирования, равный двум. Это значит, что данные, имеющие значение 75, будут отображаться с высотой 150 пикселей. Результат работы этого сценария показан на рис. 25.3.

Листинг 25.3. Создание гистограммы
<?php
/*
** Гистограмма
*/
// инициализация параметров
$GraphWidth = 400; $GraphHeight = 200; $GraphScale = 2; $GraphFont = 5; $GraphData = array(
"Beef"=>"99",
"Pork"=>"75",
"Chicken"=>"15",
"Lamb"=>"66",
"Fish"=>"22"); // создать изображение
$image = imagecreate($GraphWidth, $GraphHeight); imageantialias($image, TRUE); // задать цвета
$colorBody = imagecolorallocate($image, 0xFF, 0xFF, 0xFF); $colorGrid = imagecolorallocate($image, 0xCC, 0xCC, 0xCC); $colorBar = imagecolorallocate($image, 0xFF, 0xFF, 0x00); $colorText = imagecolorallocate($image, 0x00, 0x00, 0x00); // залить фон 
imagefill($image, 0, 0, $colorBody);
// создать линию вертикальной градуировки
$GridLabelWidth = imagefontwidth($GraphFont)*3 + 1;
imageline($image,
$GridLabelWidth, 0,
$GridLabelWidth, $GraphHeight-1,
$colorGrid); //// создать линии горизонтальной градуировки $styleDashed = array_merge(array_fill(0, 4, $colorGrid),
array_fill(0, 4, IMG_COLOR_TRANSPARENT));
imagesetstyle($image, $styleDashed); for($index = 0;
$index < $GraphHeight;
$index += $GraphHeight/10)
{
imageline($image, 0, $index,
$GraphWidth-1, $index, IMG_COLOR_STYLED);
// нарисовать надпись imagestring($image,
$GraphFont,
0,
$index,
round(($GraphHeight - $index)/$GraphScale), $colorText);
}
// добавить линию снизу imageline($image,
0, $GraphHeight-1,
$GraphWidth-1, $GraphHeight-1,
$colorGrid); // создать каждый столбец
$BarWidth = (($GraphWidth-$GridLabelWidth)/count($GraphData)) - 10;
$column = 0;
foreach($GraphData as $label=>$value)
{
//создать столбец
$BarTopX = $GridLabelWidth +
(($column+1) * 10) + ($column * $BarWidth); $BarBottomX = $BarTopX + $BarWidth; $BarBottomY = $GraphHeight-1;
$BarTopY = $BarBottomY - ($value * $GraphScale); imagefilledrectangle($image,
$BarTopX, $BarTopY,
$BarBottomX, $BarBottomY,
$colorBar); //нарисовать надпись $LabelX = $BarTopX +
(($BarBottomX - $BarTopX)/2) -
(imagefontheight($GraphFont)/2);
$LabelY = $BarBottomY-10;
imagestringup($image, $GraphFont, $LabelX, 
$LabelY,
"$label: $value", $colorText); $column++;
}
// вывести изображение header("Content-type: image/png"); imagepng($image);
?>

Создание графика подобно созданию кнопки, описанному выше. Вначале создается пустое изображение, затем распределяется несколько цветов и вызываются функции для прорисовки очертаний. Сценарий позволяет масштабировать ширину столбцов по ширине графика. Для этого ширина столбцов делится на ширину графика, а между столбцами устанавливается промежуток шириной в 10 пикселей. По центру столбца размещаются обозначение данных и их значение.