Web → Створення кругової діаграми в SVG + PHP

Побудовою діаграм в форматі SVG я зацікавився коли налаштовував PHP frontend для vnStat, тоді ж й бажав розібратися в принципах роботи, але згодом успішно про це забув. В цій нотатці виправлятиму дану ситуацію.

SVG (від англ. Scalable Vector Graphics — масштабована векторна графіка) — мова розмітки масштабованої векторної графіки, створена W3C, яка входить до підмножина розширюваних мов розмітки XML, призначена для опису двовимірної векторної і змішаної векторно/растрової графіки в форматі XML (© Wiki).

Якщо спростити, SVG — це звичайний XML файл (текстовий), що містить опис графіки. Безпосередня генерація картинки проводиться засобами браузера на стороні клієнта.

Для початку розглянемо приклад:

Він описує ось таку картинку (точки були позначені згодом):

Я буду візуалізувати вигадану статистику популярності браузерів, кожен елемент (колір) — це один браузер. Для створення секції використовується тег <path>, що дозволяє описувати довільні фігури.

Початком фігури завжди є центр діаграми (A), обраховувати ж потрібно дві точки — початок (B) й кінець (C) сектора кола.

Як би не сумно було признавати, але шкільний курс тригонометрії я забув повністю, ніколи не думав, що мені стануть в нагоді синуси й косинуси. З наскоку розібратися в чужих скріптах теж не вдалося, тому пішов штудіювати тригонометричні функції. Знання повернулися швидко

Синусом є відношення , а косинусом .

Виведемо необхідні нам координати Y_B = R × sin α, X_B = R × cos α.

Слід врахувати, що отримані з даних формул координати, будуть достовірні для декартової системи координат. Нам прийдеться їх трохи перетворити, ібо при генерації SVG, об’єкти з від’ємними координатами не будуть відображатися.

 250,
			  'Chrome' => 80,
			  'Opera' => 150,
			  'IE' => 60,
			  'Opera Mini' => 15
			  );
$radius = 140;
//координати центру діаграми
$cx = 150;
$cy = 150;
?>

Код містить коментарі, думаю проблем бути не має. Тег— дозволяє задавати певні атрибути для групи елементів.

Результат:

В SVG доволі легко працювати з JavaScript, це дозволяє придати інтерактивності діаграмі.

Звісно це все лише приклади, й в такому вигляді їх ніде не застосуєш, та загалом SVG доволі перспективна технологія й безумовно варта уваги.

Основні переваги й недоліки:
+ Текстовий формат, зручно редагувати (при необхідних навичках)
+ Масштабованість
+ Можливість створювати анімацію
+ Відкритість
– Великий розмір (але є можливість використовувати стиснутий формат SVGZ)
– Необхідність завантажувати цілий документ для роботи з його частиною (актуально для картографічних проектів)

P.S.
Для генерації різноманітних діаграм і графіків часто зручніше використовувати готові класи.