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с-Битрикс есть также функции для построения «столбиковой» диаграммы и рисования осей координат. К сожалению, оси строятся только с привязкой к датам и найти достойное пользовательское применение функции довольно сложно.

Если вам понравилась статья, подписывайтесь на обновления блога по rss или присоединяйтесь в twitter

Поделиться ссылкой с друзьями:

Метки: ,

Категории: Bitrix

Комментарии (10)

  1. Честно не помню с что конкретно взбесило, но год назад пытался с этими графиками работать, в итоге после ??? поставил jpgraph (обратите кстати внимание, очень-очень сурьезная штука)

    PS: не вижу обратной связи, поэтому сюда: нет ли желания поменяться ссылками в блогроле?

  2. Андрей:

    Здравствуйте Алексей.
    Пытался сделать как Вы на рабочем сайте, но мне битрикс не собирается показывать график :(. Не могу понять в чем проблема. Когда смотрю код через firebug, на месте картинки ссылка на файл ../bitrix/spread.php — я так понимаю это проверка лицензии. Может Вы знаете в чем может быть проблема.

  3. Андрей, честно говоря я не знаю что делает скрипт в spread.php. Но если сам сайт работает, то с лицензией проблем быть не должно.

  4. Андрей:

    Добрый день Алексей.
    У меня даже элементарные графики битрикс не хочет рисовать.
    Вот код:
    require_once($_SERVER["DOCUMENT_ROOT"].»/bitrix/modules/main/include/prolog_before.php»);
    require_once($_SERVER["DOCUMENT_ROOT"].»/bitrix/modules/main/img.php»);
    $width = 800; // ширина графика
    $height = 400; // высота графика
    $ImageHandle = CreateImageHandle($width, $height); // создаём картинку
    $arrX = array(0, 1, 2, 3); // данные по X
    $arrY = array(0, 3, 1, 5); // данные по Y
    DrawCoordinatGrid($arrX, array(0,1,2,3,4,5), $width, $height, $ImageHandle); // рисуем сетку
    Graf($arrX, $arrY, $ImageHandle, min($arrX), max($arrX), min($arrY), max($arrY), «0000FF», N, 2, false); // рисуем сам график
    ShowImageHeader($ImageHandle);
    А браузер выдает такое сообщение: «Изображение … graph.php не может быть показано так как содержит ошибки.»
    И че с этим делать никак не пойму. Может какие проблемы с выводом графика в png формате?

  5. Андрей, Вы забыли инициализировать служебные переменные, которые как параметры явно не передаются, но используются в функциях. Об этом есть упоминание в статье.
    Вот эти переменные:
    $xPixelLength = 430; // служебные переменные
    $yPixelLength = 430;
    $xA = 10;
    $yA = 440;

  6. Андрей:

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

  7. Более чем странно, я проверял работу Вашего скрипта, дописал эти строки и построилась ломаная линия.
    Вызывал из индексной страницы
    <img src=»/getimg.php»>
    Вот код файла getimg.php
    require_once($_SERVER["DOCUMENT_ROOT"].»/bitrix/modules/main/include/prolog_before.php»);
    require_once($_SERVER["DOCUMENT_ROOT"].»/bitrix/modules/main/img.php»);
    $width = 800; // ширина графика
    $height = 400; // высота графика
    $ImageHandle = CreateImageHandle($width, $height); // создаём картинку
    $arr_bgColor = ReColor(«E8E8E8″); // код цвета фона
    $colorFFFFFF = ImageColorAllocate($ImageHandle, $arr_bgColor[0], $arr_bgColor[1], $arr_bgColor[2]);
    ImageFill($ImageHandle, 0, 0, $colorFFFFFF); // заливаем фон
    $arrX = array(0, 1, 2, 3); // данные по X
    $arrY = array(0, 3, 1, 5); // данные по Y
    $xPixelLength = 430; // служебные переменные
    $yPixelLength = 430;
    $xA = 10;
    $yA = 440;
    DrawCoordinatGrid($arrX, array(0,1,2,3,4,5), $width, $height, $ImageHandle); // рисуем сетку
    Graf($arrX, $arrY, $ImageHandle, min($arrX), max($arrX), min($arrY), max($arrY), ’0000FF’, N, 2, false); // рисуем сам график
    ShowImageHeader($ImageHandle);

  8. Андрей:

    Добрый день Алексей.
    Вот наконец то разобрался с проблемой. Состояла в следующем: php-файл, рисующий график, не должен содержать в себе html-теги, видно когда подключаем ..prolog_before.php такие теги появляются. В итоге я оставил строчку только с подключением ..img.php и все заработало.
    Спасибо, всего доброго.

  9. Подскажите пожалуйста а можно ли выводить значение и названия долей в круговом графике?

  10. alcohol34lip:

    Неплохая возможность вывода даных в графическом обозначении. К стати получилось очень красиво.