Webix предлагает множество возможностей визуализации линейных данных c помощью различных видов чартов — bar, pie, area, scatter и radar. Но что делать с иерархическими данными? Первое, что может прийти в голову — это Webix Tree, поскольку он отлично отображает связи между родительскими и дочерними элементами. Но на этом возможности визуализации этого компонента заканчиваются.
Чтобы найти что-то более мощное, нам нужно заглянуть в пакет с PRO-виджетами. Здесь мы видим Organogram (диаграмму на основе Tree), а также TreeMap. Давайте рассмотрим второй виджет повнимательнее. Он умеет отображать иерархические данные в красивой и компактной форме.
Самый простой код инициализации довольно лаконичен:
view:"treemap", value:”#value#”,
template: function(item){ return item.label||""; },
data:data
});
Результат будет следующим:
Основные настройки
Как видите, область, которую занимает виджет, разделена на прямоугольники, размеры которых соотносятся пропорционально. Каждый прямоугольник связан с элементом дерева и разделен на более мелкие плитки, которые соответствуют дочерним элементам (дочерним веткам). Прямоугольники отсортированы от большего в верхнем левом углу к меньшему — в правом нижнем углу.
Свойство данных, используемое для расчета размеров, определяется параметром value. В конструкторе виджета это “#value#”. Посмотрите на следующий код:
{ id:"1", label: "Technology", data:[
{ id:"1.1", value:"50" }, { id:"1.2", value:"30" }
]},
{ id:"2", label: "Healthcare", data:[
{ id:"2.1", value:"10" }, { id:"2.2", value:"60" }
]}
];
Текстовые подписи над плитками задаются еще одним свойством — template. Здесь мы используем “label” из элемента данных или пустую строку.
Вы также можете задать цвета для прямоугольников и применить к ним другие стилевые настройки с помощью свойства cssClass, которое позволяет стилизовать плитки в соответствии с их данными.
cssClass: function(item){
var css, comments = item.comments;
if(!this.isBranch(item.id)){
if(comments > 30) css = "item3";
else if(comments > 20) css = "item2";
}
return css;
}
Выглядит намного красочнее, не так ли?
Для чего можно использовать TreeMap?
Чаще всего TreeMap используется при разработке анализаторов использования файловой системы или акций на фондовых биржах, а также в сфере экономической и физической статистики, и во многих других областях.
Такие диаграммы легко читать и анализировать. Этот компонент также позволяет визуализировать несколько параметров одновременно. Например, один из них может определять размеры плитки, а значение другого будет задавать насыщенность ее цвета.
Webix TreeMap — интерактивный виджет. Это значит, что вы можете увеличить масштаб определенной области, кликнув на нее, и отдельно изучить вложенные элементы. Посмотрите демо, чтобы понять, как это работает.
TreeMap может использоваться для визуализации данных любого уровня вложенности. При этом дочерние элементы отображаются при открытии ветки родителя (по клику на родительском элементе):
Что дальше?
TreeMap отлично вписывается в семейство дата компонентов Webix. Он поддерживает все операции с данными: выделение, редактирование, добавление, удаление, загрузку и сохранение. Этот виджет легко настроить и, в то же время, он прост в использовании.
Вы можете узнать больше из документации, а также посмотреть наши сэмплы. Обратите также внимание, что виджет доступен только в PRO версии Webix, но всегда можно начать с пробной версии.
