Главная

Новости

Статьи и обзоры
  Горожанин
  Обнинск в Internet
  Web Design
  Hardware
  Software
  Безопасность
  Серфинг
  Игродром
  Relax
  Технологии
  Web-обзор
  Интернет-ликбез
  Опросник
  УП-Технологии
  ART.net

Ссылки

Архив

О нас

Контакты

Форумы

POPULAR.RU

КРУГОВАЯ ДИАГРАММА

Андрей Гончаренко
окончание, начало в: #33(145),#34(146),#36(148)

В случае, если необходимо отобразить процентное соотношение каких-либо параметров, то не обойтись без круговой диаграммы. Строить ее совсем не трудно, если знать о существовании функций библиотеки GD imagearc и imagefilledarc, которые рисуют дугу и закрашенную дугу соответственно. В качестве параметров функции imagearc(int im, int cx, int cy, int w, int h, int s, int e, int col) нужно указать: im - идентификатор области рисования; cx, cy - координаты центра дуги; w, h - ширина и высота дуги(для построения сектора круга они должны быть равны); s, e - начальный и конечный углы дуги (в градусах, от 0 до 360) и, конечно же, col - цвет дуги. Функция imagefilledar() отличается от предыдущей лишь наличием дополнительного параметра style, который определяет способ заливки сектора. Этот параметр может принимать следующие значения:
IMG_ARC_PIE - обычный способ заливки, получается закрашенный сектор
IMG_ARC_CHORD(IMG_ARC_CHORD и IMG_ARC_PIE взаимоисключающие параметры!!!) - заливка по хорде, то есть получается закрашенный треугольник
IMG_ARC_NOFILL - без заливки, получаем просто дугу
IMG_ARC_EDGED - используется совместно с IMG_ARC_NOFILL и указывает, что конечный и начальный углы дуги должны быть соединены с центром.

Эти параметры можно указывать, используя оператор ||(ИЛИ).
Теперь, когда у нас есть все необходимые знания, создадим скрипт круговой диаграммы в новом файле circular_chart.php. Для начала создадим функцию рисования одного сектора круга требуемого цвета с заданным центром, радиусом, начальным и конечным углами:

<?php
function
drawSegment($x0, $y0, $radius, $begAngle, $endAngle, $color)
{
global $im, $x0, $y0, $black;
//рисуем сектор круга соответствующих размера и цвета
imagefilledarc($im, $x0, $y0, $radius*2, $radius*2,
$begAngle, $endAngle,
$color, IMG_ARC_PIE);
//рисуем окантовку черным цветом
//для выведенного ранее сектора
imagefilledarc($im, $x0, $y0, $radius*2, $radius*2,
$begAngle, $endAngle,
$black, IMG_ARC_EDGEG | IMG_ARC_NOFILL);
}

Для обработки данных и построения диаграммы нам не обойтись без соответсвующей функции, которой мы будем передавать массив данных, массив цветов, соответствующих каждому элементу массива данных, центр окружности и ее радиус:

function drawDiagram($dataArray, $colors, $x0, $y0, $radius)
{
global $im, $x0, $y0, $black;
//вычисляем количество элементов в массиве данных
$count=count($dataArray);
//получем сумму всех элементов массива
$sumVal=array_sum($dataArray);
//начнем рисовать сектора с угла 0 градусов
$begAngle=0;
//вычисляем уголо для отрисовки первого сектора
$endAngle=floor($begAngle+
(($dataArray[1]*100)/$sumVal)*360/100);
//рисуем сегмент, соответствующий
//величине первого элемента массива
drawSegment($x0, $y0, $radius,
$begAngle, $endAngle, $colors[1]);
//аналогично поступаем с остальными элементами массива,
//за исключением последнего
for($i=2; $i,$count; $i++)
{
$begAngle=$endAngle;
$endAngle=floor($begAngle+
(($dataArray[$i]*100)/$sumVal)*360/100);
drawSegment($x0, $y0, $radius,
$begAngle, $endAngle, $colors[$i]);
}
//рисуем сегмент для последнего элемента массива
$begAngle=$endAngle;
$endAngle=360;
drawSegment($x0, $y0, $radius,
$begAngle, $endAngle, $colors[$count]);
}

Теперь создадим тестовую диаграмму, используя наши функции:

$im = @ImageCreate (500, 400);
include "colors.inc";
// координаты центра окружности диаграммы
$x0=200; $y0=200;
// радиус диаграммы
$radius=100;
//заполняем массив данных и цветов для диаграммы
$dataArray[1]=2; $colors[1]=$red;
$dataArray[2]=6; $colors[2]=$blue;
$dataArray[3]=10; $colors[3]=$green;
//рисуем диаграмму
drawDiagram($dataArray, $colors, $x0, $y0, $radius);
ImagePNG($im);
imagedestroy($im);
?>

Для вывода сформированного графика в браузер можно воспользоваться скриптом, аналогичным тому, который был использован в примере со счетчиком.
Разумеется, в рамках данного текста были рассмотрены далеко не все возможности библиотеки GD. К счастью, документация к GD написана вполне понятным и разумным языком, так что вы сможете многое без особого труда изучить самостоятельно