В ходе разработки одного из наших проектов мы столкнулись с необходимостью отдавать в клиентском html большое количество графики. С точки зрения минимализации нагрузки на сервер, строить объёмную графику на стороне клиента — это единственное правильное решение. При поиске готовых и подходящих нам JS решений из этой области мы основательно подсели на JS библиотеку Raphael, которая позволяет легко прорисовывать векторную графику во всех актуальных на сегодня браузерах. Разобравшись в функционале и отладив несколько функций по созданию основных типов диаграмм, мы решили поделиться здесь своими наработками.
Итак. Описанный ниже пример создаёт средствами Raphael и PHP круговую диаграмму в формате SVG, представленную на изображении. Мы постарались максимально подробно описать исходный код, чтобы помочь всем тем, кто самостоятельно разобраться в этом не нашёл сил или времени.
Файл circle.php:
<?php
// для начала необходимо создать объект с определённым идентификатором,
// заданной ширины и высоты для дальнейшей работы
function start_paper($id, $width, $height) {
return 'var r = Raphael("' .$id .'", ' .$width .', ' .$height .');';
}
// создание круговой диаграммы
function paper_circle_chart($params) {
// расчёт радиуса "излома" как половины толщины сектора
// для создания 3D эффекта выпуклости диаграммы
$shadow_width = floor(($params['radius']-$params['inradius'])*0.47);
$pradius = $params['radius'] - $shadow_width;
// радиус выноса линий выноски
$outradius = $params['radius'] + $params['text_radius'];
// сумма данных
$total = array_sum($params['data']);
$i = 0;
$prev = 0;
$fangel = 0;
$code = '';
$pcode = '';
$pline = '';
$ptext = '';
$pstext = '';
$center = '';
$begin = true;
// рисуем секторы диаграммы в цикле
foreach ($params['data'] as $k => $v) {
// определяем цвет текущего сектора
$color = $params['colors'][$i];
// если нулевой сектор проходим мимо
if ($v == 0) {
$i++;
continue;
}
// если диаграмма состоит из одного сектора - рисуем сплошной круг
elseif ($v == $total) {
$pend = deg2rad(45);
$code = '
r.circle(' .$params['centerx'] .', ' .$params['centery'] .', ' .$params['radius'] .').attr({"fill": "' .$color .'"})';
if (count($params['texts'])) {
$dxc = round($params['centerx'] + $pradius * sin($pend), 2);
$dyc = round($params['centery'] - $pradius * cos($pend), 2);
$dxc1 = round($params['centerx'] + $outradius * sin($pend), 2);
$dyc1 = round($params['centery'] - $outradius * cos($pend), 2);
$dxc2 = $dxc1 + $params['text_width'];
$dxc3 = $dxc1 + round($params['text_width']/2, 2);
$dyc2 = $dyc1 - $params['text_minus'];
$dyc3 = $dyc1 + $params['text_plus'];
$pcode .= '
r.circle(' .$dxc .', ' .$dyc .', ' .$params['point_radius'] .')';
$pline .= '
r.path("M'. $dxc .','. $dyc .' L'. $dxc1 .','. $dyc1 .' L'. $dxc2 .','. $dyc1 .'")';
$ptext .= '
r.text(' .$dxc3 .', ' .$dyc2 .', "100 %")';
$pstext .= '
r.text(' .$dxc3 .', ' .$dyc3 .', "' .$params['texts'][$i] .'")';
}
}
// иначе - рисуем текущий сектор
else {
$percent = $v / $total;
$angel = 360 * $percent;
$rad = deg2rad($angel);
$end = $prev + $rad;
$pend = $prev + $rad/2;
$dx = round($params['centerx'] + $params['radius'] * sin($prev), 2);
$dy = round($params['centery'] - $params['radius'] * cos($prev), 2);
$dxp = round($params['centerx'] + $params['radius'] * sin($end), 2);
$dyp = round($params['centery'] - $params['radius'] * cos($end), 2);
if ($percent > 0.5) $sec = 1;
else $sec = 0;
if (!$begin) $code .= ',';
$code .= '
r.path("M' .$params['centerx'] .',' .$params['centery'] .' L' .$dx .',' .$dy .' A' .$params['radius'] .',' .$params['radius'] .' 0 ' .$sec .',1 ' .$dxp .',' .$dyp .' z").attr({"fill": "' .$color .'"})';
if (count($params['texts'])) {
$dxc = round($params['centerx'] + $pradius * sin($pend), 2);
$dyc = round($params['centery'] - $pradius * cos($pend), 2);
$dxc1 = round($params['centerx'] + $outradius * sin($pend), 2);
$dyc1 = round($params['centery'] - $outradius * cos($pend), 2);
if (($fangel + $angel/2) > 180) {
$dxc2 = $dxc1 - $params['text_width'];
$dxc3 = $dxc1 - round($params['text_width']/2, 2);
}
else {
$dxc2 = $dxc1 + $params['text_width'];
$dxc3 = $dxc1 + round($params['text_width']/2, 2);
}
$dyc2 = $dyc1 - $params['text_minus'];
$dyc3 = $dyc1 + $params['text_plus'];
if (!$begin) {
$pcode .= ',';
$ptext .= ',';
$pstext .= ',';
$pline .= ',';
}
$pcode .= '
r.circle(' .$dxc .', ' .$dyc .', ' .$params['point_radius'] .')';
$pline .= '
r.path("M'. $dxc .','. $dyc .' L'. $dxc1 .','. $dyc1 .' L'. $dxc2 .','. $dyc1 .'")';
$ptext .= '
r.text(' .$dxc3 .', ' .$dyc2 .', "' .round($percent * 100) .' %")';
$pstext .= '
r.text(' .$dxc3 .', ' .$dyc3 .', "' .$params['texts'][$i] .'")';
}
$i++;
$begin = false;
$prev = $end;
$fangel += $angel;
}
}
// устанавливаем атрибут "контур" для всех секторов диагрммы
if ($code) $code = '
var st = r.set();
st.push(' .$code .'
);
st.attr({"stroke": "none"});';
// устанавливаем атрибут "цвет" для всех линий выноски
if ($pline) $pline = '
var st = r.set();
st.push(' .$pline .'
);
st.attr({"stroke": "' .$params['line_color'] .'"});';
// устанавливаем атрибуты "контур" и "цвет заливки" для плашек всех линий выноски
if ($pcode) $pcode = '
var st = r.set();
st.push(' .$pcode .'
);
st.attr({"fill": "' .$params['text_color'] .'", "stroke": "' .$params['stroke_color'] .'"});';
// устанавливаем атрибуты "шрифт", "размер" и "цвет" для подписей над линией выноски
if ($ptext) $ptext = '
var st = r.set();
st.push(' .$ptext .'
);
st.attr({"font-family": "' .$params['font'] .'", "font-size": "' .$params['text_name'] .'", "fill": "' .$params['text_color'] .'", "cursor": "default"});';
// устанавливаем атрибуты "шрифт", "размер" и "цвет" для подписей под линией выноски
if ($pstext) $pstext = '
var st = r.set();
st.push(' .$pstext .'
);
st.attr({"font-family": "' .$params['font'] .'", "font-size": "' .$params['text_small'] .'", "fill": "' .$params['text_color'] .'", "cursor": "default"});';
// создаём центр диаграммы и текст внутри него
$inradius = '';
if ($params['inradius'] > 0) {
$inradius = '
r.circle(' .$params['centerx'] .', ' .$params['centery'] .', ' .$params['inradius'] .').attr({"fill": "' .$params['center_text_back'] .'", "stroke": "none"});';
if ($params['shadow']) $inradius .= '
r.circle(' .$params['centerx'] .', ' .$params['centery'] .', ' .($params['radius']-$shadow_width+floor($shadow_width/2)) .').attr({"fill": "none", "stroke": "#FFFFFF", "stroke-width": "' .$shadow_width .'", "stroke-opacity": "0.15"});';
if ($params['center_text']) {
$center = '
r.text(' .$params['centerx'] .', ' .$params['centery'] .', "' .$params['center_text'] .'").attr({"font-family": "' .$params['font'] .'", "font-size": "' .$params['center_text_size'] .'", "fill": "' .$params['center_text_color'] .'", "cursor": "default"});';
}
}
return $code .$inradius .$pline .$pcode .$ptext .$pstext .$center;
}
?>
Файл test.php:
<?php
include("circle.php");
$params = array ( // параметры диаграммы
'font' => 'PT Sans, Tahoma', // шрифт
'text_color' => '#212121', // цвет текста
'line_color' => '#494949', // цвет линий выноски
'text_width' => 40, // ширина горизотальной части линий выноски
'text_radius' => 14, // расстояние отступа горизотальной части линий выноски от диаграммы
'point_radius' => 3, // радиус плашки линии выноски ( круг в месте соединения линии выноски с сектором данных )
'stroke_color' => '#EFEFEF', // цвет контура плашки
'text_name' => 13, // размер текста над линией выноски
'text_small' => 11, // размер текста под линией выноски
'text_minus' => 10, // отступ текста вверх над линией выноски
'text_plus' => 8, // отступ текста вниз под линией выноски
'centerx' => 100, // центр диаграммы по оси x
'centery' => 100, // центр диаграммы по оси y
'radius' => 42, // внешний радиус диаграммы
'inradius' => 19, // радиус внутреннего круга
'center_text_back' => '90-#e7e7e7-#ffffff:60', // цвет внутреннего круга
'center_text' => 416, // надпись в центре внутреннего круга
'center_text_size' => 14, // размер текста в центре внутреннего круга
'center_text_color' => '#212121', // цвет текста в центре внутреннего круга
'data' => array( // исходные данные
139,
112,
89,
76),
'texts' => array ( // подписи к секторам, отображаются под линией выноски
'пас',
'навес',
'в разрез',
'прострел'
),
'colors' => array ( // цвета секторов
'0-#08b2ff-#0e56d4',
'0-#fffa17-#ffba17',
'0-#e0070e-#f15722',
'0-#BCE408-#5FBB00'
),
'shadow' => 1 // делать или нет 3D эффект выпуклости диаграммы
);
// создаём диаграмму, в <head></head> размещаем js код, в <body></body> - <div></div>
// c идентификатором идентичным переданному в конструктор диаграммы start_paper()
$head = start_paper('diagram', 200, 200) .paper_circle_chart($params);
$body = '<div id="diagram"></div>';
echo '
<!DOCTYPE html>
<html>
<head>
<title>Пример круговой SVG диаграммы средствами Raphael и PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="/raphael-min.js"></script>
<script>
window.onload = function () {'
.$head .'
};
</script>
</head>
<body>'
.$body .'
</body>
</html>';
?>
Приведенный выше исходный код полностью рабочий. Каждый желающий поковыряться и разобраться в изложенном материале самостоятельно может скачать библиотеку и собрать три файла (circle.php, test.php и raphael-min.js) в единое целое.
Итоговый html, который получает клиент:
<!DOCTYPE html>
<html>
<head>
<title>Пример круговой SVG диаграммы средствами Raphael и PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="/raphael-min.js"></script>
<script>
window.onload = function () {var r = Raphael("diagram", 200, 200);
var st = r.set();
st.push(
r.path("M100,100 L100,58 A42,42 0 0,1 136.27,121.18 z").attr({"fill": "0-#08b2ff-#0e56d4"}),
r.path("M100,100 L136.27,121.18 A42,42 0 0,1 74.6,133.45 z").attr({"fill": "0-#fffa17-#ffba17"}),
r.path("M100,100 L74.6,133.45 A42,42 0 0,1 61.7,82.76 z").attr({"fill": "0-#e0070e-#f15722"}),
r.path("M100,100 L61.7,82.76 A42,42 0 0,1 100,58 z").attr({"fill": "0-#BCE408-#5FBB00"})
);
st.attr({"stroke": "none"});
r.circle(100, 100, 19).attr({"fill": "90-#e7e7e7-#ffffff:60", "stroke": "none"});
r.circle(100, 100, 37).attr({"fill": "none", "stroke": "#FFFFFF", "stroke-width": "10", "stroke-opacity": "0.15"});
var st = r.set();
st.push(
r.path("M127.75,84.07 L148.57,72.12 L188.57,72.12"),
r.path("M106.24,131.39 L110.93,154.92 L150.93,154.92"),
r.path("M68.99,107.89 L45.73,113.81 L5.73,113.81"),
r.path("M82.63,73.13 L69.59,52.97 L29.59,52.97")
);
st.attr({"stroke": "#494949"});
var st = r.set();
st.push(
r.circle(127.75, 84.07, 3),
r.circle(106.24, 131.39, 3),
r.circle(68.99, 107.89, 3),
r.circle(82.63, 73.13, 3)
);
st.attr({"fill": "#212121", "stroke": "#EFEFEF"});
var st = r.set();
st.push(
r.text(168.57, 62.12, "33 %"),
r.text(130.93, 144.92, "27 %"),
r.text(25.73, 103.81, "21 %"),
r.text(49.59, 42.97, "18 %")
);
st.attr({"font-family": "PT Sans, Tahoma", "font-size": "13", "fill": "#212121", "cursor": "default"});
var st = r.set();
st.push(
r.text(168.57, 80.12, "пас"),
r.text(130.93, 162.92, "навес"),
r.text(25.73, 121.81, "в разрез"),
r.text(49.59, 60.97, "прострел")
);
st.attr({"font-family": "PT Sans, Tahoma", "font-size": "11", "fill": "#212121", "cursor": "default"});
r.text(100, 100, "416").attr({"font-family": "PT Sans, Tahoma", "font-size": "14", "fill": "#212121", "cursor": "default"});
};
</script>
</head>
<body><div id="diagram"></div>
</body>
</html>
О том, как работает градиентная заливка (0-#BCE408-#5FBB00) с точки зрения синтаксиса Raphael и другие моменты касательно функций этой библиотеки и их параметров достаточно подробно изложены в документации. К слову подробная документация, широкий функционал и кроссбраузерность этого решения — являются, с нашей точки зрения, неоспоримым преимуществом данной библиотеки над аналогичными средствами.
Надеемся, что наш опыт будет полезен всем тем, кто впервые столкнулся с задачей построения векторной графики в html средствами JS. Постараемся ответить на все вопросы и комментарии по данной теме.
Автор: Andrii13
