개요
조직도는 일반적으로 조직의 상급/종속 관계를 묘사하는 데 사용되는 노드 계층 구조의 다이어그램입니다. 가계도는 조직 차트의 한 유형입니다.
예
<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 |
표준 선택 이벤트 속성
없음
|
| 준비됨 |
차트에서 외부 메서드 호출을 사용할 준비가 되었습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 속성
없음
|
데이터 정책
브라우저에서 모든 코드와 데이터가 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.