[]
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);


숫자 그룹화

행 필드에 나열되는 개별 숫자 값 대신, 수치 데이터를 그룹화하여 도수분포표(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;