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

선버스트 차트

선버스트 차트는 계층적 데이터 집합을 그래픽 형태로 표시하며, 여러 카테고리 또는 레벨에 대해 행과 열에 데이터를 플로팅합니다.

SpreadJS는 선버스트 차트를 지원하여 사용자가 워크시트 내에서 테이블 및 관계형 데이터베이스를 사용할 때 동질적 및 이질적 데이터를 분석할 수 있도록 합니다. 이 차트 유형은 특히 다양한 비즈니스 시나리오에서 다단계의 부모-자식 관계를 식별하고 시각화할 수 있도록 데이터를 다양한 항목으로 분해하는 데 유용합니다.

선버스트 차트의 작동 방식

일반적으로 선버스트 차트는 여러 단계 또는 카테고리를 포함하여 생성됩니다. 각 카테고리 또는 단계는 링 또는 원으로 표현되며, 가장 안쪽 원은 최상위 레벨을 나타내고, 바깥쪽 링(하위 카테고리 또는 하위 레벨)은 안쪽 링(상위 카테고리 또는 최상위 레벨)과의 관계를 시각적으로 보여줍니다.

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

하나의 카테고리 또는 레벨만으로 선버스트 차트를 만들 경우, 그 외형은 도넛 차트와 유사합니다. 선버스트 차트는 특히 하나의 카테고리 또는 레벨(링)이 어떻게 여러 구성 요소로 나뉘는지를 보여주고자 할 때 유용합니다.

예제

예를 들어, 아래 표와 같이 세계 인구를 나타내는 데이터가 있다고 가정해보겠습니다. 네 개의 주요 지역(최상위 레벨)인 아시아, 아프리카, 유럽, 기타는 데이터 포인트로 표시됩니다. 이 지역들은 다시 하위 지역으로 나뉘며, 각 하위 지역은 다시 국가로 나뉘고, 각 국가는 고유한 인구 통계를 가집니다.



해당 데이터를 기반으로 선버스트 차트를 생성하면 정보를 더욱 빠르고 효과적으로 조작, 이해 및 시각화하여 포괄적인 데이터 분석이 가능해집니다.

아래 스크린샷은 위 데이터를 기반으로 한 선버스트 차트로, 지역, 하위 지역, 국가별 세계 인구를 시각화한 예입니다.



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


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

Ask ChatGPT

// 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);
  })
};

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

Ask ChatGPT