组织结构图

概览

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

示例

 
<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 列 - [可选] 当用户将鼠标悬停在此节点上时要显示的工具提示文本。

每个节点可以有零个或一个父节点，以及零个或多个子节点。

自定义属性

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

物业名称
selectedStyle

应用对象：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');

配置选项

名称
allowCollapse

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

类型：boolean
默认值：false
allowHtml

如果此政策设为 true，包含 HTML 标记的名称将以 HTML 形式呈现。

类型：boolean
默认值：false
颜色

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

类型：string
默认值：'#edf7ff'
compactRows

如果设置为 true，则只要节点不重叠，子树就会尽可能靠近。使用此选项可减少总体绘图宽度和边缘长度。

类型：boolean
默认值：false
nodeClass

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

类型：string
默认值：default class name
selectedNodeClass

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

类型：string
默认值：default class name
selectionColor

已弃用。请改用 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() 实现。将每个选择条目视为行选择。支持选择多个行。

Return Type（返回类型）：none

事件

名称
收起

当 allowCollapse 设置为 true 并且用户双击包含子节点的节点时触发的事件。

媒体资源：
collapsed - 指示事件是“收起”事件还是“展开”事件的布尔值。
row - 数据表中行的索引（从零开始），对应于所点击的节点。
onmouseover

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

媒体资源：
row - 数据表中行的索引（从零开始），与鼠标悬停的节点相对应。
onmouseout

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

媒体资源：
row - 数据表中行的索引（从零开始），对应于从鼠标移出的节点。
select

标准选择事件

媒体资源：
无
准备就绪

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

媒体资源：
无

数据政策

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