조직도

개요

조직 차트는 조직의 계층 구조를 파악하는 데 일반적으로 사용되는 노드의 계층 구조 다이어그램입니다. 가계도는 조직 차트의 한 유형입니다.

예

 
<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개의 문자열 열이 있는 테이블. 여기서 각 행은 조직 차트의 노드를 나타냅니다. 세 가지 열은 다음과 같습니다.

  • 열 0 - 노드 ID 모든 노드에서 고유해야 하며 공백을 포함한 모든 문자를 포함할 수 있습니다. 노드에 표시됩니다. 대신 차트에 표시할 서식이 지정된 값을 지정할 수 있지만, 형식이 지정되지 않은 값은 여전히 ID로 사용됩니다.
  • 열 1 - [선택사항] 상위 노드의 ID입니다. 다른 행의 열 0에 있는 형식이 지정되지 않은 값이어야 합니다. 루트 노드에는 지정하지 않습니다.
  • 열 2 - [선택사항] 사용자가 이 노드 위에 마우스를 가져가면 표시되는 도움말 텍스트

각 노드에는 0개 또는 1개의 상위 노드와 0개 이상의 하위 노드가 있을 수 있습니다.

맞춤 속성

DataTable의 setProperty() 메서드를 사용하여 데이터 표 요소에 다음과 같은 맞춤 속성을 할당할 수 있습니다.

속성 이름
선택된 스타일

적용 대상: 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');

구성 옵션

이름
allow접기

더블클릭 시 노드가 접히는지 확인합니다.

유형: boolean
기본값: false
allowHtml

true로 설정하면 HTML 태그가 포함된 이름이 HTML로 렌더링됩니다.

유형: boolean
기본값: false
색상

지원 중단됩니다. 대신 nodeClass를 사용하세요. 조직도 요소의 배경색입니다.

유형: string
기본값: '#edf7ff'
CompactRows

true로 설정하면 노드가 겹치지 않는 한 하위 트리를 최대한 가깝게 배치합니다. 전체 그리기 너비와 가장자리 길이를 줄이려면 이 옵션을 사용하세요.

유형: boolean
기본값: false
nodeClass

노드 요소에 할당할 클래스 이름입니다. 이 클래스 이름에 CSS를 적용하여 차트 요소의 색상이나 스타일을 지정합니다.

유형: string
기본값: default class name
선택한 노드 클래스

선택한 노드 요소에 할당할 클래스 이름입니다. 이 클래스 이름에 CSS를 적용하여 선택한 차트 요소의 색상이나 스타일을 지정합니다.

유형: string
기본값: default class name
선택 색상

지원 중단됩니다. 선택한 nodeClass를 대신 사용하세요. 선택한 조직도 요소의 배경색입니다.

유형: 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() 구현입니다. 선택 요소는 모두 행 요소입니다. 2개 이상의 선택된 행을 반환할 수 있습니다.

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

표준 setSelection() 구현입니다. 모든 선택 항목을 행 선택으로 취급합니다. 여러 행 선택을 지원합니다.

반환 유형: 없음

이벤트

이름
접기

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

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

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

속성:
row - 데이터 테이블 내 행의 0부터 시작하는 색인으로, 마우스 커서를 가리는 노드에 해당합니다.
Onmouseout

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

속성:
row - 데이터 표에서 행의 0부터 시작하는 색인으로, 마우스로 가리키는 노드에 해당합니다.
select

표준 선택 이벤트

속성:
없음
준비됨

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

속성:
없음

데이터 정책

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