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

Обзор

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

Пример

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> 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 type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> 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}); }
<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=true , чтобы это работало, и его необходимо установить перед вызовом draw() для визуализации. Это переопределяет параметр selectionColor для указанного узла.

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

стиль

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

Строка встроенного стиля для назначения определенному узлу. Это переопределяется свойством selectedStyle . Вы должны установить параметр 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
выбранный класс узла

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

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

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

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

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

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

Методы

Метод
collapse(row, collapsed)
Сворачивает или разворачивает узел.
  • row — индекс строки, которую нужно развернуть или свернуть.
  • rolled Свернуть или развернуть строку, где true означает collapsed .
Тип возврата: 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 и вызывать методы только после запуска события.

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

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

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