1с-Битрикс: строим диаграммы и графики

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

Для построения картинки надо создать php-файл, который будет формировать в памяти изображение, а потом посылать необходимые заголовки и контент вызывающему скрипту. Т.е. для отображения используем конструкцию вида <img src=»get-img.php» />, где в get-img.php можно также передать параметры (например, через GET-данные)

Общая схема работы

Первым делом следует создать изображение функцией

function CreateImageHandle($width, $height, $background="FFFFFF", $truecolor=true)

Возвращается дескриптор, который используется для остальных операций. Параметры вызова интуитивно понятны.

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

За отправку заголовков и сам вывод отвечает функция

function ShowImageHeader($ImageHandle)

Единственный параметр — дескриптор изображения, полученный выше.

Все скрипты содержатся в файле /bitrix/modules/main/img.php

Диаграммы

Для построения круговой объемной диаграммы используется функция

function Circular_Diagram($ImageHandle, $arr, $background_color, $diameter, $centerX, $centerY, $antialiase=true)

Где
$ImageHandle — дескриптор изображения
$background_color — фон
$diameter — диметр круга
$centerX — координаты центра по оси Х
$centerY — координат центра по оси Y
$antialiase — сглаживание (улучшает качество изображения)
$arr — ассоциативный массив вида:
$arr[][«COLOR»] => код цвета в шестнадцатеричном виде
$arr[][«COUNTER»] => значение (число). От значения зависит величина сектора круга.

В данной функции есть одна досадная недоработка — при использовании сглаживания игнорируется содержимое параметра $background_color и фон диаграммы всегда белый. Так происходит из-за строк 696-698 в файле img.php

$ImageHandle = CreateImageHandle($diameter, $diameter, "FFFFFF", true);
//Заливаем фон
imagefill($ImageHandle, 0, 0, imagecolorallocate($ImageHandle, 255,255,255));

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

function ReColor($srtCol)

которая переводит строковое представление цвета из шестнадцатеричной системы в массив RGB в десятичной системе счисления.

Пример кода:
get-img.php

<?
require_once($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");
require_once($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/img.php");

$arChart = array();
$color = "";
$totalRecords = 10;
$diameter = 450;

for($i=1; $i<10; $i++) {
    $arChart[] = Array(
        "COLOR"=> $color = GetNextRGB($color, $totalRecords),
        "COUNTER" => $i*50
    );
}

$ImageHandle = CreateImageHandle($diameter, $diameter);
Circular_Diagram($ImageHandle, $arChart, "000000", $diameter, $diameter/2, $diameter/2);
ShowImageHeader($ImageHandle);
?>

index.php

<?require_once($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");?>
<img src="get-img.php" />
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>

Функция

function GetNextRGB($base_color, $total)

формирует «следующий» цвет в зависимости от текущего $base_color и количества различных элементов $total.

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

Графики

Графики позволяет рисовать функция

function Graf($arrayX, $arrayY, $ImageHandle, $MinX, $MaxX, $MinY, $MaxY, $Color='FF0000', $dashed="N", $thikness=2, $antialiase=true)

где
$arrayX — массив значений по оси Х
$arrayY — массив значений по оси Y
$ImageHandle — дескриптор картинки
$MinX, $MaxX, $MinY, $MaxY — минимальное и максимальное значение X и Y
$Color — цвет графика
$dashed — рисовать пунктиром (Y|N)
$thikness — толщина линий
$antialiase — режим сглаживания

Это служебная функция, и перед ее вызовом необходимо установить значения нескольких переменных
$xPixelLength — ширина области для рисования
$yPixelLength — высота области для рисования
$xA — координата Х левого нижнего угла области для рисования относительно левой границы картинки
$yA — координата Y левого нижнего угла области для рисования относительно верха картинки

Также есть возможность установить фон изображения с помощью функций

$arr_bgColor = ReColor("FFFFFF");
$colorFFFFFF = ImageColorAllocate($ImageHandle, $arr_bgColor[0], $arr_bgColor[1], $arr_bgColor[2]);
ImageFill($ImageHandle, 0, 0, $colorFFFFFF);

где FFFFFF — код цвета

Пример, построим график синуса
get-img.php

<?
require_once($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");
require_once($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/img.php");

$diameter = 450;
$arrX=Array(); // data points X
$arrY=Array(); // data points Y

for($i=0; $i<=6.28; $i+=0.1) {
    $arrX[] = $i; // аргументы и значения функции на отрезке [0,2*Pi]
    $arrY[] = sin($i);
}

$ImageHandle = CreateImageHandle($diameter, $diameter);

$arr_bgColor = ReColor("E8E8E8"); // код цвета фона
$colorFFFFFF = ImageColorAllocate($ImageHandle, $arr_bgColor[0], $arr_bgColor[1], $arr_bgColor[2]);
ImageFill($ImageHandle, 0, 0, $colorFFFFFF); // заливаем фон
$xPixelLength = 430; // служебные переменные
$yPixelLength = 430;
$xA = 10;
$yA = 440;
Graf($arrX, $arrY, $ImageHandle, 0, 6.28, -1, 1, 'FF0000', "N", 2, true);

ShowImageHeader($ImageHandle);
?>

index.php

<?require_once($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");?>
<img src="get-img.php" />
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>

Результат:

В 1с-Битрикс есть также функции для построения «столбиковой» диаграммы и рисования осей координат. К сожалению, оси строятся только с привязкой к датам и найти достойное пользовательское применение функции довольно сложно.