Ни для кого ни секрет, что чарт является удобным инструментом для систематизации информации и управления ей. Чарты способны представлять огромные объемы данных в простом схематичном виде. Библиотека Webix стремится следовать современным тенденциям и предлагает возможность интеграции с популярными чартами таких Javascript библиотек, как D3, Raphael and Sigma и JustGage. В то же время, у Webix есть коллекция собственных JavaScript графиков.
Инициализация чарта на странице
Вам не потребуется писать длинный код, чтобы добавить сторонний чарт в приложение Webix, поскольку компоненты Webix уже содержат все необходимое.
Тем не менее, эти компоненты не включены в стандарный пакет библиотеки, поэтому вам нужно загрузить JS файл необходимого компонента из репозитория вспомогательных библиотек Webix.
Этот специальный javascript файл подключит ваше приложение к выбранному чарту и автоматически загрузит все необходимые файлы чарта.
Затем нужно включить загруженный файл в заголовок HEAD вашего документа. К примеру, для встраивания D3 Chart будет использована следующая строка:
Теперь вы можете инициализировать чарт с помощью кода, представленного ниже. Но сначала необходимо задать относительный путь к каталогу, из которого будут автоматически загружаться дополнительные библиотеки
webix.codebase = "./";
//функция-конструктор
webix.ui({
view:"d3-chart",
url:"...",
ready:function(){...};
});
Конструкторы для Raphael, Sigma и D3 чартов практически одинаковы. В общем случае, они включают следующие свойства:
- view – определяет имя чарта – d3-chart, justgage-chart, raphael-chart, sigma-chart;
- url – задает источник данных для чарта (файл с данными или скрипт);
- ready – функция, которая выполняется после полной загрузки компонента. Она содержит необходимый для работы чарта исходный код, который доступен на сайте, посвященном тому или иному чарту.
Таким образом, мы получаем привлекательного вида d3-чарт на странице. Демо можно посмотреть здесь.
Особенности Sigma Chart
Для того, чтобы задать конфигурацию Sigma Chart, вам понадобятся 2 из вышеописанных свойств — view и url:
webix.codebase = "./";
//функция-конструктор
webix.ui({
view:"sigma-chart",
url:"./data/les_miserables.gexf"
});
Интегрированный чарт поддерживает 2 плагина для Sigma Chart (“fisheye” и “forceAtlas2”), которые описаны в руководствах на сайте библиотеки. По умолчанию, используется “fisheye” плагин. Также поддерживается формат данных GEXF.
Вы можете посмотреть онлайн-демо интегрированного Sigma Chart.
Кроме того, вы можете написать свой собственный плагин и подключить его к sigma-чарту Webix компонента. Более подробная информация представлена в документации.
Особенности JustGage Chart
Что касается чарта Justgage Gauge, его конфигурация очень проста и задается прямо в Webix компоненте:
webix.codebase = "./";
//функция-конструктор
webix.ui({
view:"justgage-chart",
value:25,
title:"Positive",
height:300,
min: 0,
max: 100
});
где свойства задают следующие значения:
- value — начальное значение чарта;
- title — название чарта;
- height — высота шкалы чарта;
- min — минимальное значение чарта;
- max — максимальное значение чарта.
Чтобы оценить Justgage чарт в работе, посмотрите демо.
Заключение
Как видите, интеграция Webix со сторонними чартами достаточно проста и не занимает много времени. Нужно всего лишь выбрать подходящий чарт, добавить несколько строк кода, и он появится на странице. За дополнительной информацией вы можете обратиться к соответствующей статье документации.
