Як візуалізувати графіки і зробити їх інтерактивними на jаvascript.

Всім привіт! У цій статті ми розглянемо, як візуалізувати графіки і зробити їх інтерактивними на jаvascript.

У сучасних системах графіки використовуються дуже часто. Це і зрозуміло, адже вони дозволяють наочно показати часом дуже складну інформацію і тим самим зробити її простий для сприйняття. Однак розвиток не стоїть на місці, і тепер з`являються інтерактивні графіки, які можуть виконувати найрізноманітніші функції. Ви можете перетягувати їх, з`єднувати, розділяти, додавати або видаляти окремі компоненти. Все це робить роботу більш швидкої і зручної для кінцевого користувача системи. У цій статті я хочу показати вам досить простий, але теж дуже корисний спосіб створення подібного роду графіків.

Відео: # 3 - HTML5 Графіка і Анімація з Canvas, вивчаємо canvas API

Звичайно, зроблено це вже за нас і називається greuler. Greuler працює на базі D3 і WebCola, завдяки чому ми можемо використовувати простий API для управління графіками.

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

Відео: jаvascript Frameworks Day 2016

установка

Підключіть необхідні скрипти:

встановіть greuler за допомогою Bower:

bower install greuler

Підключіть скачаний скрипт:

Використання

Для користувача є прості властивості:

target - селектор контейнера, що містить графік
data - об`єкт, що містить опис властивостей графіка
data.nodes - вузли графіка, потрібно id
data.edges - краю графіка, вони з`єднують два вузли по id

Це основні властивості. Більше властивостей і більш докладний опис ви можете знайти в файлі README.

Приклад коду:

`Use strict`- 
greuler({ 
 target:`# Hello-world`, 
 width:480, 
 data:{ 
 nodes:[ 
{id:0}, 
{id:1}, 
{id:2}, 
{id:3}, 
{id:4} 
], 
 links:[ 
{source:0, target:1}, 
{source:1, target:2}, 
{source:2, target:0}, 
{source:3, target:4} 
] 
} 
}).update()

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

Дякую за увагу!

Поділися в соціальних мережах:

Схожі