Блог

Интеграция со сторонними чартами

Ни для кого ни секрет, что чарт является удобным инструментом для систематизации информации и управления ей. Чарты способны представлять огромные объемы данных в простом схематичном виде. Библиотека Webix стремится следовать современным тенденциям и предлагает возможность интеграции с популярными чартами таких Javascript библиотек, как D3, Raphael and Sigma и JustGage. В то же время, у Webix есть коллекция собственных чартов.

Инициализация чарта на странице

Вам не потребуется писать длинный код, чтобы добавить сторонний чарт в приложение Webix, поскольку компоненты Webix уже содержат все необходимое.

Тем не менее, эти компоненты не включены в стандарный пакет библиотеки, поэтому вам нужно загрузить JS файл необходимого компонента из репозитория вспомогательных библиотек Webix.

Этот специальный javascript файл подключит ваше приложение к выбранному чарту и автоматически загрузит все необходимые файлы чарта.

Затем нужно включить загруженный файл в заголовок HEAD вашего документа. К примеру, для встраивания D3 Chart будет использована следующая строка:

<script type="text/javascript" src="./d3.js"></script>

Теперь вы можете инициализировать чарт с помощью кода, представленного ниже. Но сначала необходимо задать относительный путь к каталогу, из которого будут автоматически загружаться дополнительные библиотеки

//путь к каталогу
webix.codebase = "./";

//функция-конструктор
webix.ui({
view:"d3-chart",
url:"...",
ready:function(){...};
});
D3 Charts

Конструкторы для 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 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 — максимальное значение чарта.

03_b

Чтобы оценить Justgage чарт в работе, посмотрите демо.

Заключение

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

Автор
The following two tabs change content below.
Olga Kustova

Olga Kustova

Веб-разработчик, умело сочетающий качественный код и эффективный дизайн. Всегда готова делиться тайным знанием Webix с широкой аудиторией.
Share on Google Plus Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn VK Vote on Reddit