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

그룹화 및 축소

SpreadJS를 사용하면 피벗 테이블에서 그룹화 및 축소 작업을 수행할 수 있어 필요한 데이터만 표시하여 보다 명확한 데이터를 확인할 수 있습니다. 이는 데이터를 더 요약할 수 있는 대량의 피벗 테이블을 다룰 때 특히 유용합니다. 날짜, 텍스트, 숫자 기반으로 데이터를 그룹화할 수 있으며, 아래 섹션에서 설명합니다.

날짜 그룹화

SpreadJS는 피벗 테이블에서 날짜/시간(datetime) 유형의 필드를 그룹화하거나 그룹 해제할 수 있도록 지원합니다. 초, 분, 시간, 일, 월, 분기, 연도 등의 다양한 시간 단위로 날짜 데이터를 그룹화할 수 있으며, 시작 및 종료 시점을 설정할 수도 있습니다. dateGroups 속성을 사용하여 해당 기능을 구현할 수 있습니다.

아래 이미지는 2020년 데이터를 분기별로 그룹화한 예시입니다.


image


다음 코드 샘플은 날짜 데이터를 분기 기준으로 그룹화하는 방법을 보여줍니다.

// 날짜 기준으로 그룹화
 let groupInfo = {
     originFieldName: "date", dateGroups: [
         { by: GC.Pivot.DateGroupType.quarters },
         { by: GC.Pivot.DateGroupType.years },
         { by: GC.Pivot.DateGroupType.months }
     ]
 };
 pivotTable.group(groupInfo);
 pivotTable.add("Years (date)", "Years (date)", GC.Spread.Pivot.PivotTableFieldType.columnField);
 pivotTable.add("Quarters (date)", "Quarters (date)", GC.Spread.Pivot.PivotTableFieldType.columnField);
 pivotTable.add("Months (date)", "Months (date)", GC.Spread.Pivot.PivotTableFieldType.columnField);

텍스트 그룹화

피벗 테이블에서 textGroup 메서드를 사용하여 행 레이블 또는 열 레이블 항목을 그룹화할 수 있습니다. 이 메서드는 add 메서드를 사용하여 새 그룹을 추가하며, 그룹이 생성되면 새로운 필드도 함께 만들어집니다.

아래 이미지는 행 레이블 항목으로 생성된 새 그룹을 보여줍니다.




다음 코드 샘플은 행 레이블 항목의 텍스트를 그룹화하는 방법을 보여줍니다.

// 항목 기준으로 그룹
myPivotTable.views.apply("empty_pt");
myPivotTable.add("Region", "Region", GC.Spread.Pivot.PivotTableFieldType.rowField);
myPivotTable.add("Quantity", "Sum of quantity", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
let groupInfo = {
    originFieldName: "Product", textGroup: {
        fieldName: "NewProduct",
        groupItems: {
            Drinks: ['Coffee', 'Juice'],
            Chocolate: ['Dark', 'White', 'Milk'],
            Others: ['Breads', 'Cheese puffs', 'Cookie']
        }
    }
};
myPivotTable.group(groupInfo);
myPivotTable.add("NewProduct", "TestProduct", GC.Spread.Pivot.PivotTableFieldType.columnField);

또한 개발자는 groupInterval 옵션을 사용하여 일(day) 단위로 측정되는 사용자 지정 간격을 정의할 수 있습니다. 예를 들어, 다음 샘플은 날짜를 7일 단위 블록(주간 보기) 으로 그룹화하는 방법을 보여줍니다.

// 사용자 지정 범위로 그룹화
const pivotTable = sheet.pivotTables.add("PivotTable", source, 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.medium3);
let groupInfo = { 
    originFieldName: "Date", dateGroups: [
        { by: GC.Pivot.DateGroupType.days, groupInterval: 7 }
    ]
};
pivotTable.group(groupInfo);
pivotTable.add("Days (date)", "Days (date)", GC.Spread.Pivot.PivotTableFieldType.rowField);

image.728e0c.png

참고:

  • groupInterval 옵션은 그룹화가 일(days) 단위로만 이루어질 때 동작합니다.

  • 타임라인에 지정된 시작 또는 종료 범위를 벗어나는 데이터가 포함된 경우, 해당 항목은 특수 그룹에 배치됩니다. 출력 결과에서는 그림과 같이 경계 날짜에 “<” 또는 “>” 기호가 결합되어 표시됩니다.

image.545a7e.png

  • 이 모드에서 인식되는 최소 단위는 일(day) 입니다. 즉, 시작 날짜가 2025/2/3 08:30:30 AM 인 경우에도 그룹화 시스템은 이를 2025/2/3 00:00:00 AM 으로 처리합니다.

  • 일부 그룹화된 구간에는 레코드가 없을 수도 있습니다. 데이터의 공백을 강조하기 위해 이러한 구간도 표시하고 싶다면 데이터가 없는 항목 표시(Show items with no data) 옵션을 켤 수 있습니다. 이 옵션은 기본적으로 꺼져 있습니다.

image.4f6716.png

숫자 그룹화

행 필드에 나열되는 개별 숫자 값 대신, 수치 데이터를 그룹화하여 도수분포표(Frequency Distribution Table)를 만들 수 있습니다. 숫자 데이터를 범위로 묶어 분석할 수 있으며, numberGroup 메서드를 통해 구현할 수 있습니다.

아래 이미지는 수량(Quantity)의 도수 분포 예시입니다.


다음 코드 샘플은 숫자를 그룹화하는 방법을 보여줍니다.

// 숫자 기준으로 그룹화
myPivotTable.views.apply("empty_pt");
myPivotTable.add("Quantity", "Quantity", GC.Spread.Pivot.PivotTableFieldType.rowField);
myPivotTable.add("Region", "Region", GC.Spread.Pivot.PivotTableFieldType.colField);
myPivotTable.add("Product", "Count of quantity", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.count);
let groupInfo = { originFieldName: "Quantity", numberGroup: { by: 30 } };
myPivotTable.group(groupInfo);

그룹 축소/확장

collapse 옵션을 사용하면 피벗 테이블에서 특정 그룹이나 전체 피벗 필드를 확장하거나 축소할 수 있습니다. 아래 이미지는 East 지역, Bakery 및 Chocolates 카테고리 필드가 축소된 상태를 보여줍니다.


다음 코드 샘플은 그룹을 축소하거나 확장하는 방법을 보여줍니다.

// 일부 그룹 축소
myPivotTable.collapse("Region", "East", true);
myPivotTable.collapse("Category", "Bakery", true);
myPivotTable.collapse("Category", "Chocolates", true);

// 그룹 확장
myPivotTable.collapse("Region", "East", false);


축소/확장 버튼 숨기기

피벗 테이블에서 항목 제목 왼쪽에 표시되는 확장 및 축소 버튼(+ 또는 - 기호)을 showDrill 옵션을 사용하여 표시하거나 숨길 수 있습니다.


다음 코드 샘플은 피벗 테이블에서 축소/확장 버튼을 숨기는 방법을 보여줍니다.

myPivotTable.options.showDrill = false;