Пример создания компонента TreeMap

Для выполнения примера необходимо создать html-страницу и выполнить следующие действия:

1. Добавить ссылку на css-файл PP.css.

Также нужно добавить ссылки на следующие js-файлы: PP.js, PP.GraphicsBase.js, PP.TreeMap.js, и TreeMapData.js.

Файл TreeMapData.js определяет переменную с наименованием «data», содержащую настройки для создания компонента PP.Ui.TreeMap.

Содержимое файла TreeMapData.js

2. Необходимо добавить спрайт с названием «tl_imagelist.png» по адресу build/Img.

3. В теге <body> разместить блок с идентификатором «treeMap» для хранения созданной диаграммы:

<div id="treeMap" style="border: #CCCCCC 1px solid; padding: 5px; margin: 5px; height: 480px;
    width: 640px;">
</div>

4. Далее в теге <body> необходимо добавить сценарий, создающий диаграмму:

<script language="javascript">
    // Переменная, в которой будем хранить экземпляр диаграммы
    var treeMap;
    // Укажем путь к корневой папке, содержащей файлы ресурсов
    PP.resourceManager.setRootResourcesFolder("../resources/");
    // Установим языковые настройки для ресурсов
    PP.setCurrentCulture(PP.Cultures.ru)
    // Получим DOM-элемент контейнера, в котором будет нарисовано дерево 
    var container = document.getElementById("treeMap");
    // Создадим новый экземпляр плоского дерева
    treeMap = new PP.Ui.TreeMap(data);
    // Разместим плоское дерево в блоке <div>
    treeMap.addToNode(container);
    // Установим размеры диаграммы
    treeMap.setWidth(640);
    treeMap.setHeight(480);
</script>

В результате выполнения примера на html-странице будет размещен компонент PP.Ui.TreeMap:

См. также:

TreeMap