Как визуализировать графики и сделать их интерактивными на JavaScript.
Всем привет! В этой статье мы рассмотрим, как визуализировать графики и сделать их интерактивными на JavaScript.
В современных системах графики используются очень часто. Это и понятно, ведь они позволяют наглядно показать порой очень сложную информацию и тем самым сделать ее простой для восприятия. Однако развитие не стоит на месте, и теперь появляются интерактивные графики, которые могут выполнять самые различные функции. Вы можете перетаскивать их, соединять, разделять, добавлять или удалять отдельные компоненты. Все это делает работу более быстрой и удобной для конечного пользователя системы. В этой статье я хочу показать вам достаточно простой, но тоже очень полезный способ создания подобного рода графиков.
Конечно, сделано это уже за нас и называется greuler. Greuler работает на базе D3 и WebCola, благодаря чему мы можем использовать простой API для управления графиками.
Посмотреть демонстрации вы можете на том же сайте разработчика. Если вы решили добавить себе на сайт такой функционал, то давайте рассмотрим установку. Она достаточно простая.
Установка
Подключите необходимые скрипты:
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>
Установите greuler с помощью Bower:
bower install greuler
Подключите скачанный скрипт:
<script src="bower_components/greuler/dist/greuler.js"></script>
Использование
Для пользователя есть простые свойства:
- 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()
Библиотека довольно полезная, надеюсь, кому-нибудь из вас пригодится.
Спасибо за внимание!
-
Создано 18.01.2017 07:00:00
-
Михаил Русаков
Комментарии (1):
Пожалуйста оцените сайт http://tolshinomers.ru/
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.