트리맵

  1. 개요
  2. 예
  3. 하이라이트
  4. 도움말
  5. 로드 중
  6. 데이터 형식
  7. 구성 옵션
  8. 메서드
  9. 이벤트
  10. 데이터 정책

개요

데이터 트리의 시각적 표현으로, 각 노드에는 0개 이상의 하위 요소와 1개의 상위 요소가 있을 수 있습니다 (상위 요소가 없는 루트 제외). 각 노드는 할당하는 값에 따라 크기와 색상이 지정된 직사각형으로 표시됩니다. 크기와 색상은 그래프의 다른 모든 노드를 기준으로 평가됩니다. 동시에 표시할 레벨 수를 지정할 수 있으며, 선택적으로 더 깊은 레벨을 힌트 방식으로 표시할 수도 있습니다. 노드가 리프 노드인 경우 크기와 색상을 지정할 수 있습니다. 리프가 아니면 리프 노드의 경계 상자로 표시됩니다. 기본 동작은 사용자가 노드를 마우스 왼쪽 버튼으로 클릭할 때 트리 아래로 이동하고 그래프를 마우스 오른쪽 버튼으로 클릭하면 트리에서 다시 위로 이동하는 것입니다.

그래프의 전체 크기는 페이지에 삽입한 포함 요소의 크기에 따라 결정됩니다. 이름이 너무 길어 표시할 수 없는 리프 노드가 있는 경우 이름이 생략 기호 (...)로 잘립니다.

예

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['treemap']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
          ['Global',    null,                 0,                               0],
          ['America',   'Global',             0,                               0],
          ['Europe',    'Global',             0,                               0],
          ['Asia',      'Global',             0,                               0],
          ['Australia', 'Global',             0,                               0],
          ['Africa',    'Global',             0,                               0],
          ['Brazil',    'America',            11,                              10],
          ['USA',       'America',            52,                              31],
          ['Mexico',    'America',            24,                              12],
          ['Canada',    'America',            16,                              -23],
          ['France',    'Europe',             42,                              -11],
          ['Germany',   'Europe',             31,                              -2],
          ['Sweden',    'Europe',             22,                              -13],
          ['Italy',     'Europe',             17,                              4],
          ['UK',        'Europe',             21,                              -5],
          ['China',     'Asia',               36,                              4],
          ['Japan',     'Asia',               20,                              -12],
          ['India',     'Asia',               40,                              63],
          ['Laos',      'Asia',               4,                               34],
          ['Mongolia',  'Asia',               1,                               -5],
          ['Israel',    'Asia',               12,                              24],
          ['Iran',      'Asia',               18,                              13],
          ['Pakistan',  'Asia',               11,                              -52],
          ['Egypt',     'Africa',             21,                              0],
          ['S. Africa', 'Africa',             30,                              43],
          ['Sudan',     'Africa',             12,                              2],
          ['Congo',     'Africa',             10,                              12],
          ['Zaire',     'Africa',             8,                               10]
        ]);

        tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

        tree.draw(data, {
          minColor: '#f00',
          midColor: '#ddd',
          maxColor: '#0d0',
          headerHeight: 15,
          fontColor: 'black',
          showScale: true
        });

      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

주요 정보

요소를 강조 표시해야 하는지 여부를 지정하고 이러한 경우 특정 요소에서 사용할 특정 색상을 설정할 수 있습니다. 강조표시를 사용하려면 highlightOnMouseOver:true (v49 이하) 또는 enableHighlight: true (v50 이상)를 설정합니다. 여기에서 다양한 HighlightColor 옵션을 사용하여 요소를 강조표시하는 데 사용할 색상을 설정할 수 있습니다. 

      var options = { // For v49 or before
        highlightOnMouseOver: true,
        maxDepth: 1,
        maxPostDepth: 2,
        minHighlightColor: '#8c6bb1',
        midHighlightColor: '#9ebcda',
        maxHighlightColor: '#edf8fb',
        minColor: '#009688',
        midColor: '#f7f7f7',
        maxColor: '#ee8100',
        headerHeight: 15,
        showScale: true,
        height: 500,
        useWeightedAverageForAggregation: true
      };
      var optionsV50 = { // For v50+
        enableHighlight: true,
        maxDepth: 1,
        maxPostDepth: 2,
        minHighlightColor: '#8c6bb1',
        midHighlightColor: '#9ebcda',
        maxHighlightColor: '#edf8fb',
        minColor: '#009688',
        midColor: '#f7f7f7',
        maxColor: '#ee8100',
        headerHeight: 15,
        showScale: true,
        height: 500,
        useWeightedAverageForAggregation: true,
        // Use click to highlight and double-click to drill down.
        eventsConfig: {
          highlight: ['click'],
          unhighlight: ['mouseout'],
          rollup: ['contextmenu'],
          drilldown: ['dblclick'],
        }
      };

툴팁

기본적으로 트리맵 도움말은 기본이며 트리맵 셀의 라벨을 표시합니다. 이 방법은 셀이 너무 작아 라벨을 포함할 수 없는 경우에 유용하지만 이 섹션에 설명된 대로 추가로 맞춤설정할 수 있습니다.

트리맵 도움말은 다른 차트와 다르게 맞춤설정됩니다. 즉, 함수를 정의한 다음 generateTooltip 옵션을 해당 함수로 설정합니다. 다음 예를 참조하세요.

위의 차트에서는 사용자가 트리맵 셀 위로 마우스를 가져갈 때마다 표시되는 HTML이 포함된 문자열을 간단히 반환하는 showStaticTooltip라는 함수를 정의합니다. 사용해 보기 이를 생성할 코드는 다음과 같습니다.

  var options = {
    minColor: '#e7711c',
    midColor: '#fff',
    maxColor: '#4374e0',
    showScale: true,
    generateTooltip: showStaticTooltip
  };

  tree.draw(data, options);

  function showStaticTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           'Read more about the <a href="http://en.wikipedia.org/wiki/Kingdom_(biology)">kingdoms of life</a>.</div>';
  }

generateTooltip 함수는 원하는 JavaScript를 사용할 수 있습니다. 일반적으로 데이터 값에 따라 다른 도움말이 필요합니다. 다음 예는 데이터 테이블의 모든 필드에 액세스하는 방법을 보여줍니다.

위의 트리맵에서 셀 위로 마우스를 가져가면 각 셀에 대해 다른 도움말이 표시됩니다. 트리맵 도움말 함수는 모두 row, size, value라는 세 가지 값을 사용합니다.

  • row: 데이터 테이블의 셀 행
  • size: 이 셀과 모든 하위 요소의 값 (열 3)의 합계
  • value: 셀의 색상이며 0~1 사이의 숫자로 표현됩니다.

showFullTooltip에서 반환되는 문자열은 다섯 줄이 있는 HTML 상자입니다.

  • 1행은 데이터 테이블의 적절한 행을 보여주므로 data.getValue를 자유롭게 사용합니다.
  • 줄 2는 row 매개변수인 행을 알려줍니다.
  • 3행은 데이터 테이블의 3열에서 이 행의 열 3 값에 하위 요소의 값을 더한 값에 대한 정보를 제공합니다.
  • 4행은 데이터 테이블의 4열에 있는 정보를 제공합니다. 이 값은 셀의 색상에 따라 0에서 1 사이의 숫자로 표시됩니다.
  var options = {
    minColor: '#e7711c',
    midColor: '#fff',
    maxColor: '#4374e0',
    showScale: true,
    generateTooltip: showFullTooltip
  };

  tree.draw(data, options);

  function showFullTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           '<span style="font-family:Courier"><b>' + data.getValue(row, 0) +
           '</b>, ' + data.getValue(row, 1) + ', ' + data.getValue(row, 2) +
           ', ' + data.getValue(row, 3) + '</span><br>' +
           'Datatable row: ' + row + '<br>' +
	   data.getColumnLabel(2) +
           ' (total value of this cell and its children): ' + size + '<br>' +
	   data.getColumnLabel(3) + ': ' + value + ' </div>';
  }

}

로드

google.charts.load 패키지 이름은 "treemap"입니다.

  google.charts.load("current", {packages: ["treemap"]});

시각화의 클래스 이름은 google.visualization.TreeMap입니다.

  var visualization = new google.visualization.TreeMap(container);

데이터 형식

데이터 표의 각 행은 하나의 노드 (그래프의 직사각형)를 나타냅니다. 각 노드 (루트 노드 제외)에는 상위 노드가 하나씩 있습니다. 각 노드의 크기와 색상은 현재 표시된 다른 노드의 상대적 값에 따라 지정됩니다.

데이터 테이블에는 다음과 같은 형식의 4개 열이 있어야 합니다.

  • 열 0 - [문자열] 이 노드의 ID입니다. 공백을 포함한 유효한 JavaScript 문자열과 문자열이 보유할 수 있는 모든 길이일 수 있습니다. 이 값은 노드 헤더로 표시됩니다.
  • 열 1 - [문자열] - 상위 노드의 ID입니다. 루트 노드인 경우 비워 둡니다. 트리맵당 하나의 루트만 허용됩니다.
  • 열 2 - [숫자] - 노드의 크기입니다. 모든 양수 값이 허용됩니다. 이 값은 현재 표시된 다른 모든 노드를 기준으로 계산된 노드의 크기를 결정합니다. 리프가 아닌 노드의 경우 이 값은 무시되고 모든 하위 요소의 크기에서 계산됩니다.
  • 열 3 - [선택사항, 숫자] - 이 노드의 색상을 계산하는 데 사용되는 값(선택사항)입니다. 양수 또는 음수의 모든 값이 허용됩니다. 색상 값이 먼저 minColorValue에서 maxColorValue까지의 배율로 다시 계산되고 그런 다음 노드에 minColor과 maxColor 사이의 그라데이션의 색상이 할당됩니다.

구성 옵션

이름
enableHighlight (v50 이상)

요소에 강조 표시된 효과를 표시해야 하는지 결정합니다. 기본 트리거는 마우스를 올려놓았을 때입니다. 트리거는 eventsConfig로 구성할 수 있습니다. true로 설정하면 다양한 highlightColor 옵션을 사용하여 여러 요소의 강조표시를 지정할 수 있습니다.

유형: 불리언
기본값: false
이벤트 구성 (v50 이상)

트리 맵 상호작용을 트리거하는 이벤트 구성입니다. 상호작용을 구성하는 형식:

eventsConfig: {
  interaction1: undefined, // or missing
  interaction2: [], // disable
  interaction3: [
    'mouse_event',
    'optional_key1',
    'optional_key2',
    'optional_key3',
    'optional_key4'
  ],
  ...,
}
구성 배열이 정의되지 않았거나 상호작용에 대해 누락된 경우 default가 사용됩니다.
구성이 빈 배열이면 상호작용이 사용 중지됩니다.
유효한 구성의 경우 mouse_event가 필요하며 지원되는 마우스 이벤트여야 합니다. 그런 다음 최대 4개의 선택적 키 특수키를 사용할 수 있습니다.
지원되는 상호작용:
강조 표시, 강조 표시 해제, 롤업, 드릴다운을 선택합니다.
지원되는 마우스 이벤트:
'click', 'contextmenu', 'dblclick', 'mouseout', 'mouseover'가 있습니다. 'contextmenu'는 마우스 오른쪽 버튼 클릭에 해당합니다.
지원되는 마우스 이벤트 특수키:
'altKey', 'ctrlKey', 'metaKey', 'shiftKey'입니다.
현재 구성을 가져옵니다.
getEventsConfig() 메서드를 호출합니다.
다음은 Control+Shift+Right_Click을 사용하여 트리 위로 이동하는 예입니다.
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }
유형: 객체
기본값: 
{
  highlight: ['mouseover'],
  unhighlight: ['mouseout'],
  rollup: ['contextmenu'], // right-click
  drilldown: ['click']
}
fontColor

텍스트 색상입니다. HTML 색상 값을 지정합니다.

유형: 문자열
기본값: #ffffff
fontFamily

모든 텍스트에 사용할 글꼴 모음입니다.

유형: 문자열
기본값: auto
fontSize

모든 텍스트의 글꼴 크기(포인트)입니다.

유형: 숫자
기본값: 12
forceIFrame

인라인 프레임 안에 차트를 그립니다. IE8에서는 이 옵션이 무시되며 모든 IE8 차트가 i-프레임으로 그려집니다.

유형: 불리언
기본값: false
headerColor

각 노드의 헤더 섹션 색상입니다. HTML 색상 값을 지정합니다.

유형: 문자열
기본값: #988f86
headerHeight

각 노드에 대한 헤더 섹션의 높이로 픽셀 단위입니다 (0일 수 있음).

숫자 유형
기본값: 0
headerHighlightColor

마우스를 가져가면 노드 헤더의 색상입니다. HTML 색상 값 또는 null을 지정합니다. null인 경우 이 값은 headerColor 35% 밝아집니다.

유형: 문자열
기본값: null
HighlightOnMouseOver (v50 이상에서는 지원 중단됨)

v50 이상에서는 지원 중단되었습니다. v50 이상에서는 enableHighlight를 사용하세요. 요소에 마우스를 가져가면 강조 효과를 표시할지 결정합니다. true로 설정하면 다양한 highlightColor 옵션을 사용하여 여러 요소의 강조표시를 지정할 수 있습니다.

유형: 불리언
기본값: false
hintOpacity

maxPostDepth가 1보다 크면 현재 깊이 아래에 있는 노드가 표시되며 hintOpacity는 얼마나 투명해야 하는지 지정합니다. 0에서 1 사이여야 하며, 값이 클수록 노드가 희미해집니다.

유형: 숫자
기본값: 0.0
maxColor

열 3 값이 maxColorValue인 직사각형의 색상입니다. HTML 색상 값을 지정합니다.

유형: 문자열
기본값: #00dd00
maxDepth

현재 뷰에 표시할 최대 노드 수준 수입니다. 레벨이 현재 평면으로 평면화됩니다. 트리의 레벨이 이보다 많은 경우 트리를 보려면 위 또는 아래로 이동해야 합니다. 그 아래에 있는 maxPostDepth 수준도 이러한 노드 안에 음영 처리된 직사각형으로 표시될 수 있습니다.

유형: 숫자
기본값: 1
maxHighlightColor

3열에서 값이 가장 큰 노드에 사용할 강조 색상입니다. HTML 색상 값 또는 null을 지정합니다. null인 경우 이 값은 35% 밝아진 maxColor 값이 됩니다.

유형: 문자열
기본값: null
maxPostDepth

maxDepth를 넘어 '힌팅된' 방식으로 표시할 노드 수준 수입니다. 힌팅된 노드는 maxDepth 제한 내에 있는 노드 내에서 음영 처리된 직사각형으로 표시됩니다.

유형: 숫자
기본값: 0
maxColorValue

3열에 허용되는 최댓값입니다. 이보다 큰 모든 값은 이 값으로 잘립니다. null로 설정하면 열의 최댓값으로 설정됩니다.

유형: 숫자
기본값: null
midColor

maxColorValue와 minColorValue 중간에 열 3 값이 있는 직사각형의 색상입니다. HTML 색상 값을 지정합니다.

유형: 문자열
기본값: #000000
midHighlightColor

minColorValue 및 maxColorValue의 중앙값 근처에 3열 값이 있는 노드에 사용할 강조표시 색상입니다. HTML 색상 값 또는 null을 지정합니다. null인 경우 이 값은 35% 밝아진 midColor 값이 됩니다.

유형: 문자열
기본값: null
minColor

열 3 값이 minColorValue인 직사각형의 색상입니다. HTML 색상 값을 지정합니다.

유형: 문자열
기본값: #dd0000
minHighlightColor

minColorValue에 가장 가까운 열 3 값이 있는 노드에 사용할 강조표시 색상입니다. HTML 색상 값 또는 null을 지정합니다. null인 경우 이 값은 35% 밝아진 minColor 값이 됩니다.

유형: 문자열
기본값: null
minColorValue

열 3에 허용되는 최솟값입니다. 이 값보다 작은 모든 값은 이 값으로 잘립니다. null로 설정하면 열의 최솟값으로 계산됩니다.

유형: 숫자
기본값: null
noColor

노드가 열 3에 대한 값이 없고 해당 노드가 리프인 경우 (또는 잎만 포함된 경우) 직사각형에 사용할 색상입니다. HTML 색상 값을 지정합니다.

유형: 문자열
기본값: #000000
noHighlightColor

강조 표시되었을 때 '없음' 색상의 직사각형에 사용할 색상입니다. HTML 색상 값 또는 null을 지정합니다. null인 경우 35% 밝아진 noColor 값이 됩니다.

유형: 문자열
기본값: null
showScale

차트 상단에 minColor에서 maxColor까지의 색상 그라디언트를 표시할지 여부입니다. 배율을 표시하려면 true를 지정하세요.

유형: 불리언
기본값: false
showTooltips

도움말 표시 여부입니다.

유형: 불리언
기본값: true
textStyle

트리맵과 같이 콘텐츠 영역에 텍스트가 있는 특정 차트의 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다. 

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color은 HTML 색상 문자열(예: 'red' 또는 '#00cc00')일 수 있습니다. fontName 및 fontSize도 참고하세요.

유형: 객체
기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
title

차트 위에 표시할 텍스트입니다.

유형: 문자열
기본값: 제목 없음
titleTextStyle

제목 텍스트 스타일을 지정하는 객체입니다. 객체의 형식은 다음과 같습니다.

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color은 HTML 색상 문자열(예: 'red' 또는 '#00cc00')일 수 있습니다. fontName 및 fontSize도 참고하세요.

유형: 객체
기본값: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
useWeightedAverageForAggregation

집계에 가중 평균을 사용할지 여부입니다.

유형: 불리언
기본값: false

메서드

메서드
draw(data, options)

차트를 그립니다.

반환 유형: 없음
getEventsConfig() (for v50+)

현재 상호작용 구성을 반환합니다. 이는 구성 옵션 eventsConfig을 확인하는 데 사용할 수 있습니다.

반환 유형: 객체
{ // An empty array (i.e. []) means the interaction is disabled.
  highlight: string[],
  unhighlight: string[],
  rollup: string[],
  drilldown: string[] }
getSelection()

표준 getSelection() 구현입니다. 선택한 요소는 노드입니다. 한 번에 하나의 노드만 선택할 수 있습니다.

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

표준 setSelection() 구현입니다. 선택한 요소는 노드입니다. 한 번에 하나의 노드만 선택할 수 있습니다.

반환 유형: 없음
goUpAndDraw()

트리를 한 단계 위로 이동한 후 다시 그립니다. 노드가 루트 노드인 경우에는 오류를 발생시키지 않습니다. 이 작업은 사용자가 노드를 마우스 오른쪽 버튼으로 클릭하면 자동으로 시작됩니다.

반환 유형: 없음
getMaxPossibleDepth()

현재 뷰의 가능한 최대 깊이를 반환합니다.

반환 유형: 숫자
clearChart()

차트를 지우고 할당된 리소스를 모두 해제합니다.

반환 유형: 없음

이벤트

구성 가능한 이벤트 트리거는 eventsConfig를 참고하세요.
이름
onmouseover

사용자가 노드에 마우스를 올려 놓으면 실행됩니다. 이벤트 핸들러에는 데이터 테이블에 있는 해당 항목의 행 색인이 전달됩니다.

속성: 행
highlight (for v50+)

사용자가 노드를 강조 표시할 때 실행됩니다. 기본 트리거는 마우스 오버입니다. v50 이상에서는 eventsConfig로 구성할 수 있습니다. 이벤트 핸들러에는 데이터 테이블에 있는 해당 항목의 행 색인이 전달됩니다.

속성: 행
onmouseout

사용자가 노드 밖으로 마우스를 가져가면 실행됩니다. 이벤트 핸들러에는 데이터 테이블에 있는 해당 항목의 행 색인이 전달됩니다.

속성: 행
unhighlight (for v50+)

사용자가 노드를 강조표시 해제할 때 실행됩니다. 기본 트리거는 마우스아웃입니다. v50 이상에서는 eventsConfig로 구성할 수 있습니다. 이벤트 핸들러에는 데이터 테이블에 있는 해당 항목의 행 색인이 전달됩니다.

속성: 행
ready

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

속성: 없음
rollup

사용자가 트리를 다시 위로 이동할 때 실행됩니다. 기본 트리거는 마우스 오른쪽 버튼 클릭입니다. v50 이상의 경우 eventsConfig로 구성할 수 있습니다. 이벤트 핸들러에 전달되는 행 속성은 사용자가 이동하는 행이 아니라 사용자가 출발하는 노드의 행입니다.

속성: 행
select

사용자가 드릴다운하거나 노드를 롤업할 때 실행됩니다. setSelection() 또는 goUpAndDraw() 메서드가 호출될 때도 실행됩니다. 어떤 노드가 선택되었는지 알아보려면 getSelection()를 호출하세요.

속성: 없음
drilldown (for v50+)

사용자가 트리 안으로 들어가면 실행됩니다. 기본 트리거는 클릭입니다. v50 이상에서는 eventsConfig로 구성할 수 있습니다. 클릭된 노드를 알아보려면 getSelection()를 호출하세요.

속성: 없음

데이터 정책

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