Организационная структура

Обзор

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

Пример 

<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

Строка встроенного стиля, назначаемая определенному узлу при выборе. Чтобы это работало, вы должны установить опциюallowHtml allowHtml=true , и ее необходимо установить перед вызовом draw() для визуализации. Это переопределяет параметр selectionColor для указанного узла.

Пример: myDataTable.setRowProperty(2, 'selectedStyle', 'background-color:#00FF00');

стиль

Применяется к: строке DataTable

Строка встроенного стиля, которую можно назначить определенному узлу. Это переопределяется свойством selectedStyle . Чтобы это работало, вы должны установить опциюallowHtml allowHtml=true , и ее необходимо установить перед вызовом draw() для визуализации. Это переопределяет параметр color для указанного узла.

Пример: myDataTable.setRowProperty(3, 'style', 'border: 1px solid green');

Параметры конфигурации

Имя
РазрешитьСвернуть

Определяет, приведет ли двойной щелчок к свертыванию узла.

Тип: boolean
По умолчанию: false
разрешитьHtml

Если установлено значение true, имена, содержащие теги HTML, будут отображаться как HTML.

Тип: boolean
По умолчанию: false
цвет

Устарело. Вместо этого используйте nodeClass. Цвет фона элементов организационной диаграммы.

Тип: string
По умолчанию: '#edf7ff'
компактные строки

Если установлено значение true, поддеревья размещаются как можно ближе, пока узлы не перекрываются. Используйте эту опцию, чтобы уменьшить общую ширину чертежа и длину края.

Тип: boolean
По умолчанию: false
класс узла

Имя класса, присваиваемое элементам узла. Примените CSS к этому имени класса, чтобы указать цвета или стили для элементов диаграммы.

Тип: string
По умолчанию: default class name
выбранныйNodeClass

Имя класса, которое будет назначено выбранным элементам узла. Примените CSS к этому имени класса, чтобы указать цвета или стили для выбранных элементов диаграммы.

Тип: string
По умолчанию: default class name
выборЦвет

Устарело. Вместо этого используйте selectedNodeClass. Цвет фона выбранных элементов организационной диаграммы.

Тип: string
По умолчанию: '#d6e9f8'
размер

«маленький», «средний» или «большой»

Тип: string
По умолчанию: 'medium'

Методы

Метод
collapse(row, collapsed)
Сворачивает или разворачивает узел.
  • row — индекс строки, которую нужно развернуть или свернуть.
  • collapsed , свернуть или развернуть строку, где true означает свернуть.
Тип возврата: none
draw(data, options)

Рисует диаграмму.

Тип возврата: none
getChildrenIndexes(row)

Возвращает массив с индексами дочерних элементов данного узла.

Тип возвращаемого Array.<number>
getCollapsedNodes

Возвращает массив со списком индексов свернутого узла.

Тип возвращаемого значения: Array.<number>
getSelection()

Стандартная реализация getSelection() . Все элементы выбора являются элементами строки. Может возвращать более одной выбранной строки.

Тип возвращаемого значения: Массив элементов выбора.
setSelection(selection)

Стандартная реализация setSelection() . Рассматривает каждую запись выбора как выбор строки. Поддерживает выбор нескольких строк.

Тип возврата: нет

События

Имя
крах

Событие срабатывает, когда для allowCollapse установлено значение true и пользователь дважды щелкает узел с дочерними элементами.

Характеристики:
collapsed — логическое значение, указывающее, является ли это событием «свертывания» или «развертывания».
row — индекс строки в таблице данных, отсчитываемый от нуля, соответствующий узлу, по которому щелкают мышью.
при наведении курсора на

Срабатывает, когда пользователь наводит курсор на определенную строку.

Характеристики:
row — индекс строки в таблице данных, отсчитываемый от нуля, соответствующий узлу, на который наведен курсор мыши.
onmouseout

Срабатывает, когда пользователь выходит из строки.

Характеристики:
row — индекс строки в таблице данных, отсчитываемый от нуля, соответствующий узлу, из которого наведен курсор мыши.
выбирать

Стандартное событие выбора

Характеристики:
Никто
готовый

Диаграмма готова для вызовов внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вам следует настроить прослушиватель этого события перед вызовом метода draw и вызывать методы только после запуска события.

Характеристики:
Никто

Политика данных

Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.