组织结构图

概览

组织结构图是节点层次结构的示意图，通常用于描绘组织中的高级/从属关系。系列树是一种组织结构图。

示例

 
<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 - 节点 ID。它在所有节点中应该是唯一的，并且可以包含任何字符（包括空格）。这会显示在节点上。您可以改为指定格式的值，使其显示在图表上，但无格式的值仍会用作 ID。
  • 第 1 列 - [可选] 父节点的 ID。此值应该是另一行第 0 列中未格式化的值。不指定根节点。
  • 第 2 列 - [可选] 用户将鼠标悬停在此节点上时显示的提示提示。

每个节点可以有 0 个或 1 个父节点，以及 0 个或多个子节点。

自定义属性

您可以使用 DataTable 的 setProperty() 方法将以下自定义属性分配给数据表元素：

物业名称
所选样式

应用对象：DataTable 行

选定时要分配给特定节点的内嵌样式字符串。您必须设置选项 allowHtml=true 才能实现这一点，并且必须在对可视化图表调用 draw() 之前设置此选项。它会替换指定节点的 selectionColor 选项。

示例：myDataTable.setRowProperty(2, 'selectedStyle', 'background-color:#00FF00');
style

应用对象：DataTable 行

要分配给特定节点的内嵌样式字符串。此属性会被 selectedStyle 属性替换。您必须设置 allowHtml=true 选项才能使其正常运行，并且必须在对可视化图表调用 draw() 之前设置此选项。它会替换指定节点的 color 选项。

示例： myDataTable.setRowProperty(3, 'style', 'border: 1px solid green');

配置选项

名称
允许收起

确定双击是否会收起节点。

类型：boolean
默认：false
allowHTML

如果设置为 true，包含 HTML 标记的名称将呈现为 HTML。

类型：boolean
默认：false
颜色

已弃用。请改用 nodeClass。组织结构图元素的背景颜色。

类型：string
默认：'#edf7ff'
紧凑行

如果设置为 true，只要节点不重叠，子树就会尽可能靠近放置。 使用此选项可缩短整体绘制宽度和边长。

类型：boolean
默认：false
nodeClass

要分配给节点元素的类名称。将 CSS 应用于此类名称，以便为图表元素指定颜色或样式。

类型：string
默认：default class name
已选 NodeClass

要分配给所选节点元素的类名称。将 CSS 应用于此类名称，以便为所选图表元素指定颜色或样式。

类型：string
默认：default class name
选择颜色

已弃用。请改用 selectedNodeClass。所选组织结构图元素的背景颜色。

类型：string
默认：'#d6e9f8'
大小

“small”、“medium”或“large”

类型：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 - 数据表中相应行所对应的索引（从零开始），对应于所点击的节点。
Onmouseover

在用户将鼠标悬停在特定行上时触发。

属性：
row - 数据表中行所对应的索引（从零开始），与鼠标悬停在其上的节点相对应。
Onmouseout

当用户将鼠标悬停在某行外时触发。

属性：
row - 数据表中行所对应的索引（从零开始），对应于要从中移出的节点。
select

标准选择事件

属性：
无
准备就绪

此图表已准备好进行外部方法调用。如果您想与图表互动，并在绘制后调用方法，则应在调用 draw 方法之前为此事件设置监听器，并仅在事件触发后调用相应方法。

属性：
无

数据政策

所有代码和数据都会在浏览器中进行处理和呈现。不会向任何服务器发送数据。