概览
组织结构图是节点层次结构的示意图,通常用于描绘组织中的高级/从属关系。系列树是一种组织结构图。
示例
<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 行
选定时要分配给特定节点的内嵌样式字符串。您必须设置选项
示例: |
style |
应用对象:DataTable 行
要分配给特定节点的内嵌样式字符串。此属性会被
示例:
|
配置选项
名称 | |
---|---|
允许收起 |
确定双击是否会收起节点。 类型:
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) |
收起或展开节点。
返回值类型:
none |
draw(data, options) |
绘制图表。 返回值类型:
none |
getChildrenIndexes(row) |
返回一个数组,该数组包含给定节点的子项索引。 返回值类型
Array.<number> |
getCollapsedNodes |
返回一个数组,该数组包含收起的节点的索引列表。 返回值类型:
Array.<number> |
getSelection() |
标准 返回值类型:一组选择元素
|
setSelection(selection) |
标准 返回值类型:无
|
事件
名称 | |
---|---|
收起 |
当 属性:
collapsed - 指示这是一个“合拢”事件还是“展开”事件的布尔值。
row - 数据表中相应行所对应的索引(从零开始),对应于所点击的节点。 |
Onmouseover |
在用户将鼠标悬停在特定行上时触发。 属性:
row - 数据表中行所对应的索引(从零开始),与鼠标悬停在其上的节点相对应。 |
Onmouseout |
当用户将鼠标悬停在某行外时触发。 属性:
row - 数据表中行所对应的索引(从零开始),对应于要从中移出的节点。 |
select |
标准选择事件 属性:
无
|
准备就绪 |
此图表已准备好进行外部方法调用。如果您想与图表互动,并在绘制后调用方法,则应在调用 属性:
无
|
数据政策
所有代码和数据都会在浏览器中进行处理和呈现。不会向任何服务器发送数据。