트리맵

개요

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

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

<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 함수는 원하는 어떤 자바스크립트든 사용할 수 있습니다. 일반적으로 데이터 값에 따라 달라지는 도움말이 필요할 수 있습니다. 다음 예에서는 데이터 테이블의 모든 필드에 액세스하는 방법을 보여줍니다.

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

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

showFullTooltip에서 반환하는 문자열은 5개의 줄이 있는 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입니다. 공백과 문자열에 사용할 수 있는 모든 유효한 자바스크립트 문자열을 사용할 수 있습니다. 이 값은 노드 헤더로 표시됩니다.
  • 열 1 - [문자열] - 상위 노드의 ID 루트 노드인 경우 비워 둡니다. 트리맵당 하나의 루트만 허용됩니다.
  • 열 2 - [숫자] - 노드의 크기 양수 값을 사용할 수 있습니다. 이 값은 현재 표시된 다른 모든 노드를 기준으로 계산된 노드의 크기를 결정합니다. 리프가 아닌 노드의 경우 이 값은 무시되고 모든 하위 요소의 크기에서 계산됩니다.
  • 열 3 - [선택사항, 숫자] - 이 노드의 색상을 계산하는 데 사용되는 선택적 값입니다. 양수 또는 음수의 모든 값이 허용됩니다. 색상 값은 먼저 minColorValue부터 maxColorValue까지의 척도로 다시 계산된 후 노드에 minColor에서 maxColor 사이의 그라데이션의 색상이 할당됩니다.

구성 옵션

이름
enableHighlight (v50+용)

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

유형: 부울
기본값: false
eventsConfig (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']
}
글꼴 색상

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

유형: 문자열
기본값: #ffffff
글꼴 모음

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

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

모든 텍스트의 글꼴 크기입니다.

유형: 숫자
기본값: 12
강제 IFrame

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

유형: 부울
기본값: false
헤더색상

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

유형: 문자열
기본값: #988f86
헤더높이

각 노드의 헤더 섹션 높이입니다 (픽셀 단위).

유형 번호
기본값: 0
헤더 강조표시색상

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

유형: 문자열
기본값: null
강조표시 OnMouseOver (v50 이상에서 지원 중단됨)

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

유형: 부울
기본값: false
힌트 불투명도

maxPostDepth이 1보다 크면 현재 깊이 아래의 노드가 표시됩니다. hintOpacity가 얼마나 깊이 있어야 하는지를 지정합니다. 0과 1 사이여야 합니다. 값이 클수록 노드가 희미해집니다.

유형: 숫자
기본값: 0.0
최대 색상

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

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

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

유형: 숫자
기본값: 1
최대 강조표시색상

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

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

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

유형: 숫자
기본값: 0
maxColorValue

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

유형: 숫자
기본값: null
중간 색상

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

유형: 문자열
기본값: #000000
하이라이트 색상

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

유형: 문자열
기본값: null
최소 색상

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

유형: 문자열
기본값: #dd0000
최소 강조 색상

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

유형: 문자열
기본값: null
최소 색상값

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

유형: 숫자
기본값: null
색상 없음

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

유형: 문자열
기본값: #000000
강조 색상 없음

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

유형: 문자열
기본값: null
쇼 스케일

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

유형: 부울
기본값: false
도움말 보기

도움말 표시 여부입니다.

유형: 부울
기본값: true
텍스트 스타일

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

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

color는 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이 될 수 있습니다. fontNamefontSize도 참고하세요.

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

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

유형: 문자열
기본값: 제목 없음
제목 텍스트 스타일

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

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

color는 HTML 색상 문자열(예: 'red' 또는 '#00cc00')이 될 수 있습니다. fontNamefontSize도 참고하세요.

유형: 객체
기본값: {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()를 호출하세요.

속성: 없음

데이터 정책

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