조직도

개요

조직도는 일반적으로 조직의 상급/종속 관계를 묘사하는 데 사용되는 노드 계층 구조의 다이어그램입니다. 가계도는 조직 차트의 한 유형입니다.

예

 
<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 행

선택 시 특정 노드에 할당할 인라인 스타일 문자열입니다. 이 작업을 실행하려면 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'
크기

'S', 'M' 또는 'L'

유형: string
기본값: 'medium'

메서드

메서드
collapse(row, collapsed)
노드를 접거나 펼칩니다.
  • row - 펼치거나 접을 행의 색인입니다.
  • collapsed 행을 접을지 아니면 펼칠지 여부입니다. 여기서 true는 접기를 의미합니다.
반환 유형: none
draw(data, options)

차트를 그립니다.

반환 유형: none
getChildrenIndexes(row)

지정된 노드의 하위 요소 색인이 있는 배열을 반환합니다.

반환 유형 Array.<number>
getCollapsedNodes

접힌 노드의 색인 목록이 있는 배열을 반환합니다.

반환 유형: Array.<number>
getSelection()

표준 getSelection() 구현 Selection 요소는 모두 행 요소입니다. 선택된 행을 2개 이상 반환할 수 있습니다.

반환 유형: 선택 요소의 배열
setSelection(selection)

표준 setSelection() 구현입니다. 모든 선택 항목을 행 선택으로 처리합니다. 여러 행을 선택할 수 있습니다.

반환 유형: 없음

이벤트

이름
접으려면

allowCollapse가 true로 설정되고 사용자가 하위 요소가 있는 노드를 더블클릭하면 이벤트가 트리거됩니다.

속성
collapsed - '접기' 이벤트인지 '펼치기' 이벤트인지를 나타내는 불리언입니다.
row - 데이터 테이블에 있는 행의 0 기반 색인으로, 클릭되는 노드에 해당합니다.
onmouseover

사용자가 특정 행 위로 마우스를 가져갈 때 트리거됩니다.

속성
row - 데이터 테이블에 있는 행의 0부터 시작하는 색인으로, 마우스 오버되는 노드에 해당합니다.
onmouseout

사용자가 행 밖으로 마우스를 가져갈 때 트리거됩니다.

속성
row - 데이터 테이블에서 마우스아웃된 노드에 해당하는, 0부터 시작하는 색인입니다.
select

표준 선택 이벤트

속성
없음
준비됨

차트에서 외부 메서드 호출을 사용할 준비가 되었습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 draw 메서드를 호출하기 전에 이 이벤트의 리스너를 설정하고 이벤트가 시작된 후에만 메서드를 호출해야 합니다.

속성
없음

데이터 정책

브라우저에서 모든 코드와 데이터가 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.