# 선버스트 차트

## Content

선버스트 차트는 계층적 데이터 집합을 그래픽 형태로 표시하며, 여러 카테고리 또는 레벨에 대해 행과 열에 데이터를 플로팅합니다.
SpreadJS는 선버스트 차트를 지원하여 사용자가 워크시트 내에서 테이블 및 관계형 데이터베이스를 사용할 때 동질적 및 이질적 데이터를 분석할 수 있도록 합니다. 이 차트 유형은 특히 다양한 비즈니스 시나리오에서 다단계의 부모-자식 관계를 식별하고 시각화할 수 있도록 데이터를 다양한 항목으로 분해하는 데 유용합니다.

## **선버스트 차트의 작동 방식**

일반적으로 선버스트 차트는 여러 단계 또는 카테고리를 포함하여 생성됩니다. 각 카테고리 또는 단계는 링 또는 원으로 표현되며, 가장 안쪽 원은 최상위 레벨을 나타내고, 바깥쪽 링(하위 카테고리 또는 하위 레벨)은 안쪽 링(상위 카테고리 또는 최상위 레벨)과의 관계를 시각적으로 보여줍니다.
SpreadJS에서 [Points](/spreadjs/api/v18/classes/GC.Spread.Sheets.Charts.Points) 클래스는 차트 시리즈의 모든 데이터 포인트(`dataPoints`)를 나타냅니다. 이 데이터 포인트는 계층적 데이터에서 각각의 최상위 레벨과 그 하위 데이터 포인트들을 표현하는 데 사용될 수 있습니다.
하나의 카테고리 또는 레벨만으로 선버스트 차트를 만들 경우, 그 외형은 도넛 차트와 유사합니다. 선버스트 차트는 특히 하나의 카테고리 또는 레벨(링)이 어떻게 여러 구성 요소로 나뉘는지를 보여주고자 할 때 유용합니다.

## **예제**

예를 들어, 아래 표와 같이 세계 인구를 나타내는 데이터가 있다고 가정해보겠습니다. 네 개의 주요 지역(최상위 레벨)인 아시아, 아프리카, 유럽, 기타는 데이터 포인트로 표시됩니다. 이 지역들은 다시 하위 지역으로 나뉘며, 각 하위 지역은 다시 국가로 나뉘고, 각 국가는 고유한 인구 통계를 가집니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/data-sunburst-chart.png)

해당 데이터를 기반으로 선버스트 차트를 생성하면 정보를 더욱 빠르고 효과적으로 조작, 이해 및 시각화하여 포괄적인 데이터 분석이 가능해집니다.
아래 스크린샷은 위 데이터를 기반으로 한 선버스트 차트로, 지역, 하위 지역, 국가별 세계 인구를 시각화한 예입니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/sunburst-chart.png)

가장 안쪽 원은 네 개의 최상위 지역(아시아, 아프리카, 유럽, 기타)을 나타냅니다. 이 중 아시아는 세계에서 가장 인구가 많은 지역이며, 유럽은 인구가 가장 적은 지역입니다. 또한, 위 차트에 따르면 가장 인구가 많은 국가는 동부 하위 지역에 위치한 중국입니다.

다음은 SpreadJS에서 세계 인구 분석을 위한 선버스트 차트를 생성하는 방법을 보여주는 코드 샘플입니다.

```javascript
// Sunburst 차트 생성
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', 954051854],
    [, , 'Pakistan', 200813818],
    [, , 'Thailand', 466368149],
    [, , 'Others', 170220300],
    [, 'Eastern', 'China', 1215045928],
    [, , 'Japan', 527185332],
    [, , 'Others', 191652273],
    [, 'South-Eastern', , 955036576],
    [, 'Western', , 272298399],
    [, 'Central', , 71860465],
    ['Africa', 'Eastern', , 433043132],
    [, '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.sunburst,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);
  })
};
```

>type=warning
> **참고:** 선버스트 차트는 하나의 시리즈만 지원합니다. 또한, 선버스트 차트의 데이터 레이블은 카테고리 이름만 표시되도록 구성할 수 있습니다.