Блог

TreeMap — вся мощь визуализации в одном виджете

Webix предлагает множество возможностей визуализации линейных данных c помощью различных видов чартов — bar, pie, area, scatter и radar. Но что делать с иерархическими данными? Первое, что может прийти в голову — это Webix Tree, поскольку он отлично отображает связи между родительскими и дочерними элементами. Но на этом возможности визуализации этого компонента заканчиваются.

Чтобы найти что-то более мощное, нам нужно заглянуть в пакет с PRO-виджетами. Здесь мы видим Organogram (диаграмму на основе Tree), а также TreeMap. Давайте рассмотрим второй виджет повнимательнее. Он умеет отображать иерархические данные в красивой и компактной форме.

Самый простой код инициализации довольно лаконичен:

webix.ui({
     view:"treemap", value:”#value#”,  
     template: function(item){  return item.label||""; },
     data:data
});

Результат будет следующим:

TreeMap_Basic

 

Демо

Основные настройки

Как видите, область, которую занимает виджет, разделена на прямоугольники, размеры которых соотносятся пропорционально. Каждый прямоугольник связан с элементом дерева и разделен на более мелкие плитки, которые соответствуют дочерним элементам (дочерним веткам). Прямоугольники отсортированы от большего в верхнем левом углу к меньшему — в правом нижнем углу.

Свойство данных, используемое для расчета размеров, определяется параметром value. В конструкторе виджета это #value#. Посмотрите на следующий код:

var data = [
     { 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, которое позволяет стилизовать плитки в соответствии с их данными.

view:"treemap"
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_Colors

 

Демо

Для чего можно использовать TreeMap?

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

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

Webix TreeMap — интерактивный виджет. Это значит, что вы можете увеличить масштаб определенной области, кликнув на нее, и отдельно изучить вложенные элементы. Посмотрите демо, чтобы понять, как это работает.

TreeMap может использоваться для визуализации данных любого уровня вложенности. При этом дочерние элементы отображаются при открытии ветки родителя (по клику на родительском элементе):

TreeMap_Header

 

Демо

Что дальше?

TreeMap отлично вписывается в семейство дата компонентов Webix. Он поддерживает все операции с данными: выделение, редактирование, добавление, удаление, загрузку и сохранение. Этот виджет легко настроить и, в то же время, он прост в использовании.

Вы можете узнать больше из документации, а также посмотреть наши сэмплы. Обратите также внимание, что виджет доступен только в PRO версии 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