Обзор
Организационные диаграммы — это диаграммы иерархии узлов, которые обычно используются для отображения отношений между начальником и подчиненным в организации. Генеалогическое древо — это разновидность организационной схемы.
Пример
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {packages:["orgchart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('string', 'Manager'); data.addColumn('string', 'ToolTip'); // For each orgchart box, provide the name, manager, and tooltip to show. data.addRows([ [{'v':'Mike', 'f':'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'], [{'v':'Jim', 'f':'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'], ['Alice', 'Mike', ''], ['Bob', 'Jim', 'Bob Sponge'], ['Carol', 'Bob', ''] ]); // Create the chart. var chart = new google.visualization.OrgChart(document.getElementById('chart_div')); // Draw the chart, setting the allowHtml option to true for the tooltips. chart.draw(data, {'allowHtml':true}); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
Загрузка
Имя пакета — 'orgchart'
.
google.charts.load('current', {packages: ['orgchart']});
Имя класса визуализации — google.visualization.OrgChart
.
var visualization = new google.visualization.OrgChart(container);
Формат данных
Таблица с тремя строковыми столбцами, где каждая строка представляет узел в организационной диаграмме. Вот три столбца:
- Столбец 0 — идентификатор узла. Он должен быть уникальным среди всех узлов и может содержать любые символы, включая пробелы. Это показано на узле. Вместо этого вы можете указать отформатированное значение для отображения на диаграмме, но неформатированное значение по-прежнему будет использоваться в качестве идентификатора.
- Столбец 1 — [ необязательный ] идентификатор родительского узла. Это должно быть неформатированное значение из столбца 0 другой строки. Оставьте неуказанным для корневого узла.
- Столбец 2 — [ необязательный ] текст всплывающей подсказки, который отображается, когда пользователь наводит курсор на этот узел.
Каждый узел может иметь ноль или один родительский узел и ноль или более дочерних узлов.
Пользовательские свойства
Вы можете назначить следующие пользовательские свойства элементам таблицы данных, используя метод setProperty()
класса DataTable
:
Имя свойства | |
---|---|
выбранный стиль | Применяется к: строке DataTable Строка встроенного стиля для назначения определенному узлу при выборе. Вы должны установить параметр Пример: |
стиль | Применяется к: строке DataTable Строка встроенного стиля для назначения определенному узлу. Это переопределяется свойством Пример: |
Параметры конфигурации
Имя | |
---|---|
разрешитьСвернуть | Определяет, свернет ли узел двойной щелчок. Тип: boolean По умолчанию: false |
разрешитьHtml | Если установлено значение true, имена, содержащие теги HTML, будут отображаться как HTML. Тип: boolean По умолчанию: false |
цвет | Устарело. Вместо этого используйте nodeClass. Цвет фона элементов организационной диаграммы. Тип: string По умолчанию: '#edf7ff' |
компактные ряды | Если установлено значение true, поддеревья размещаются как можно ближе, пока узлы не перекрываются. Используйте этот параметр, чтобы уменьшить общую ширину чертежа и длину края. Тип: boolean По умолчанию: false |
класс узла | Имя класса для назначения элементам узла. Примените CSS к этому имени класса, чтобы указать цвета или стили для элементов диаграммы. Тип: string По умолчанию: default class name |
выбранный класс узла | Имя класса для назначения выбранным элементам узла. Примените CSS к этому имени класса, чтобы указать цвета или стили для выбранных элементов диаграммы. Тип: string По умолчанию: default class name |
выборЦвет | Устарело. Вместо этого используйте selectedNodeClass. Цвет фона выбранных элементов организационной диаграммы. Тип: string По умолчанию: '#d6e9f8' |
размер | «маленький», «средний» или «большой» Тип: string По умолчанию: 'medium' |
Методы
Метод | |
---|---|
collapse(row, collapsed) | Сворачивает или разворачивает узел.
Тип возврата: none |
draw(data, options) | Рисует график. Тип возврата: none |
getChildrenIndexes(row) | Возвращает массив с индексами потомков данного узла. Тип возвращаемого значения Array.<number> |
getCollapsedNodes | Возвращает массив со списком индексов свернутого узла. Тип возвращаемого значения: Array.<number> |
getSelection() | Стандартная Тип возвращаемого значения: Массив элементов выбора |
setSelection(selection) | Стандартная Тип возврата: нет |
События
Имя | |
---|---|
крах | Событие запускается, когда Характеристики: collapsed — логическое значение, указывающее, является ли это событием «свернуть» или «развернуть».row - Отсчитываемый от нуля индекс строки в таблице данных, соответствующий выбранному узлу. |
при наведении мыши | Запускается, когда пользователь наводит курсор на определенную строку. Характеристики: row - Отсчитываемый от нуля индекс строки в таблице данных, соответствующий узлу, на который наведен указатель мыши. |
onmouseout | Срабатывает, когда пользователь наводит курсор мыши за пределы строки. Характеристики: row - Отсчитываемый от нуля индекс строки в таблице данных, соответствующий узлу, из которого выбирается мышь. |
Выбрать | Стандартное событие выбора Характеристики: Никто |
готовы | Диаграмма готова к вызову внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вы должны настроить прослушиватель для этого события до вызова метода Характеристики: Никто |
Политика данных
Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.