개요
조직도는 일반적으로 조직의 상급/종속 관계를 묘사하는 데 사용되는 노드 계층 구조의 다이어그램입니다. 가계도는 조직 차트의 한 유형입니다.
예
<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);
데이터 형식
3개의 문자열 열이 있는 테이블로, 각 행은 조직도의 노드를 나타냅니다. 다음은 3개의 열입니다.
- 열 0 - 노드 ID 모든 노드에서 고유해야 하며 공백을 포함한 모든 문자를 포함할 수 있습니다. 노드에 표시됩니다. 대신 차트에 표시할 형식이 지정된 값을 지정할 수 있지만 형식이 지정되지 않은 값은 계속 ID로 사용됩니다.
- 열 1 - [선택사항] 상위 노드의 ID입니다. 다른 행의 0열에 있는 형식이 지정되지 않은 값이어야 합니다. 루트 노드는 지정되지 않은 상태로 둡니다.
- 열 2 - [선택사항] 사용자가 이 노드 위로 마우스를 가져가면 표시할 툴팁 텍스트입니다.
각 노드에는 0개 또는 1개의 상위 노드와 0개 이상의 하위 노드가 있을 수 있습니다.
맞춤 속성
DataTable
의 setProperty()
메서드를 사용하여 데이터 표 요소에 다음과 같은 맞춤 속성을 할당할 수 있습니다.
속성 이름 | |
---|---|
selectedStyle |
적용 대상: DataTable 행
선택 시 특정 노드에 할당할 인라인 스타일 문자열입니다. 이 작업을 실행하려면
예: |
스타일 |
적용 대상: DataTable 행
특정 노드에 할당할 인라인 스타일 문자열입니다. 이는
예:
|
구성 옵션
이름 | |
---|---|
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' |
크기 |
'S', 'M' 또는 'L' 유형:
string 기본값:
'medium' |
메서드
메서드 | |
---|---|
collapse(row, collapsed) |
노드를 접거나 펼칩니다.
반환 유형:
none |
draw(data, options) |
차트를 그립니다. 반환 유형:
none |
getChildrenIndexes(row) |
지정된 노드의 하위 요소 색인이 있는 배열을 반환합니다. 반환 유형
Array.<number> |
getCollapsedNodes |
접힌 노드의 색인 목록이 있는 배열을 반환합니다. 반환 유형:
Array.<number> |
getSelection() |
표준 반환 유형: 선택 요소의 배열
|
setSelection(selection) |
표준
반환 유형: 없음
|
이벤트
이름 | |
---|---|
접으려면 |
속성
collapsed - '접기' 이벤트인지 '펼치기' 이벤트인지를 나타내는 불리언입니다.
row - 데이터 테이블에 있는 행의 0 기반 색인으로, 클릭되는 노드에 해당합니다.
|
onmouseover |
사용자가 특정 행 위로 마우스를 가져갈 때 트리거됩니다. 속성
row - 데이터 테이블에 있는 행의 0부터 시작하는 색인으로, 마우스 오버되는 노드에 해당합니다.
|
onmouseout |
사용자가 행 밖으로 마우스를 가져갈 때 트리거됩니다. 속성
row - 데이터 테이블에서 마우스아웃된 노드에 해당하는, 0부터 시작하는 색인입니다.
|
select |
표준 선택 이벤트 속성
없음
|
준비됨 |
차트에서 외부 메서드 호출을 사용할 준비가 되었습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 속성
없음
|
데이터 정책
브라우저에서 모든 코드와 데이터가 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.