[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

트리맵 차트

트리맵 차트는 시트에서 트리 구조처럼 구성된 중첩 사각형 집합으로 계층적 데이터를 표시하는 데 사용할 수 있는 2차원 선형 차트입니다.

SpreadJS는 스프레드시트에서 트리맵 차트를 지원하여 향상된 데이터 시각화와 효율적인 정보 분석을 가능하게 합니다. 이 차트는 특히 공간 제약이 있고 시트의 테이블에 정의된 수천 개의 데이터 포인트와 수많은 항목을 플로팅해야 할 때 유용합니다.

트리맵 차트의 작동 방식

트리맵 차트에서는 사용자가 색상으로 구분된 사각형(브랜치)을 통해 하나 이상의 카테고리 내에서 정량 값 또는 집계 값을 비교할 수 있습니다. 각 브랜치(또는 사각형)는 하위 사각형(리프)을 포함하는 계층 구조 내의 한 레벨을 나타냅니다. 각 사각형의 면적(내부 공간)은 측정된 정량 값에 따라 할당되며, 사각형은 숫자 크기(너비와 높이)에 따라 좌측 상단(가장 큰 크기)에서 우측 하단(가장 작은 크기)으로 배치됩니다.

SpreadJS에서는 Points 클래스가 차트 시리즈의 모든 dataPoints를 나타냅니다. 데이터 포인트는 계층적 데이터의 최상위 레벨과 그 하위 데이터를 표현하는 데 사용할 수 있습니다.

예시

다음은 아래 표에 표시된 세계 인구 데이터를 예로 들 수 있습니다. 이 표는 네 개의 주요 지역(아시아, 아프리카, 유럽, 기타)을 데이터 포인트(최상위 레벨)로 구성하고 있으며, 각 지역은 하위 지역으로 나뉘며, 다시 각 국가는 고유한 인구 통계를 가지고 있습니다.



트리맵 차트를 사용하면 위 데이터를 보다 쉽고 빠르게 이해할 수 있으며, 스프레드시트에 있는 대량 데이터를 계층 구조의 사각형으로 요약해서 시각화할 수 있습니다.

아래 스크린샷은 위 데이터를 기반으로 생성된 세계 인구 트리맵 차트를 보여줍니다. 각 카테고리 또는 레벨은 고유한 색상으로 채워진 사각형으로 표시되어 서로 다른 카테고리를 간단히 비교할 수 있게 합니다.


위 이미지의 색상 사각형은 네 개의 서로 다른 카테고리(아시아, 아프리카, 유럽, 기타)를 나타냅니다. 이 중 아시아는 세계에서 인구가 가장 많은 지역으로 가장 큰 사각형이 좌측 상단에 배치되어 있으며, 유럽은 인구가 가장 적은 지역으로 가장 작은 사각형이 우측 하단에 배치되어 있습니다. 또한, 위 차트에 따르면 동아시아 지역의 중국이 세계에서 가장 인구가 많은 국가입니다.


다음은 워크시트에서 트리맵 차트를 설정하는 방법을 보여주는 코드 샘플입니다.

// Treemap 차트 생성
window.onload = function ()
{
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
  var sheet = spread.getActiveSheet();
  sheet.setColumnWidth(2, 100);
  sheet.setColumnWidth(4, 100);
  var dataArray =
  [
    ['Region', 'Subregion', 'country', 'Population'],
    ['Asia', 'Southern', 'India', 1354051854],
    [, , 'Pakistan', 200813818],
    [, , 'Bangladesh', 166368149],
    [, , 'Others', 170220300],
    [, 'Eastern', 'China', 1415045928],
    [, , 'Japan', 127185332],
    [, , 'Others', 111652273],
    [, 'South-Eastern', , 655636576],
    [, 'Western', , 272298399],
    [, 'Central', , 71860465],
    ['Africa', 'Eastern', , 433643132],
    [, 'Western', , 381980688],
    [, 'Northern', , 237784677],
    [, 'Others', , 234512021],
    ['Europe', , , 742648010],
    ['Others', , , 1057117703]
  ];

  sheet.setArray(1, 1, dataArray);
  var chart = sheet.charts.add('chart1',                 
  GC.Spread.Sheets.Charts.ChartType.treemap, 450, 0, 500, 500, "B2:E18");
  var title = chart.title()
  title.fontSize = "24.00";
  title.color = "rgb(228,65,54)";
  title.text = 'WORLD POPULATION';
  chart.title(title);
  var dataPoints = chart.series().dataPoints();
  var fillColors = ['#4472c4', '#a5a5a5', '#ffc000', '#ed7d31'];
  fillColors.forEach(function (color, index)
  {
    var dataPoint = dataPoints.get(index);
    dataPoint.fillColor = color;
    dataPoint.transparency = 0; // 0~1
    dataPoints.set(index, dataPoint);
  })
};

참고: 트리맵 차트는 하나의 시리즈만 지원합니다. 또한, 트리맵 차트의 데이터 레이블은 범주 이름만 표시되도록 설정할 수 있습니다.