Пример размещения компонентов BubbleTreeMaster и BubbleTree

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

1. В теге HEAD добавьте ссылки на следующие css-файлы: PP.css, PP.Metabase.css, PP.Express.css.

Также нужно добавить ссылки на js-файлы: PP.js, PP.GraphicsBase.js, PP.Metabase.js, PP.BubbleTree.js, PP.TreeChartMaster.js, resources.ru.js и BubbleTreeData.js.

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

2. В теге SCRIPT добавьте код для создания компонентов BubbleTreeMaster и BubbleTree:

<script language="javascript">
    // Переменная, в которой будем хранить экземпляр диаграммы
    var bubbleTree;
    // Переменная, в которой будем хранить экземпляр мастера
    var bubbleTreeMaster;
    // Укажем путь к корневой папке, содержащей файлы ресурсов
    PP.resourceManager.setRootResourcesFolder("build/resources/");
    // Установим языковые настройки для ресурсов
    PP.setCurrentCulture(PP.Cultures.ru)
    // Получим DOM-элемент контейнера, в котором будет отображено пузырьковое дерево
    var container = document.getElementById("bubbleTree");
    // Создадим новый экземпляр диаграммы
    bubbleTree = new PP.Ui.BubbleTree(data);
    // Разместим диаграмму в блоке <div>
    bubbleTree.addToNode(container);
    // Установим размеры диаграммы
    bubbleTree.setWidth(480);
    bubbleTree.setHeight(480);
    //создаем мастер диаграммы
    bubbleTreeMaster = new PP.Ui.BubbleTreeMaster({            
        ParentNode: "master", //DOM-вершина, в которой будет размещаться мастер
                    Height: 500,
                    Width: 300,
                    ImagePath: "build/img/",
                    DataView: bubbleTree        
    });
</script>

3. В теге BODY разместите созданные компоненты:

<table style="width: 500px; border: #CCCCCC 1px solid">
    <tr>
        <td valign="top" width="250" id="master"></td>
        <td valign="top" id="bubbleTree"></td>
    </tr>
</table>

После выполнения примера на странице будет размещено пузырьковое дерево и мастер для его настройки:

См. также:

BubbleTreeMaster | BubbleTree