피벗 테이블 레이아웃

SpreadJS에서는 PivotTableLayoutType 열거형을 사용하여 피벗 테이블 레이아웃을 선택하고 적용할 수 있습니다.

압축 형식
개요 형식
테이블 형식

압축 형식

압축 형식은 피벗 테이블의 기본 보고서 레이아웃으로, 각 행 레이블을 별도의 행에 표시하지만 동일한 열에 배치합니다. 이름에서 알 수 있듯이 이 레이아웃은 피벗 테이블의 너비를 줄여 데이터를 압축된 형태로 표시합니다. 다음 이미지는 피벗 테이블의 압축 형식 레이아웃을 보여줍니다.

SpreadJS Pivot Table uses Compact Form to place all row fields in one indented column while displaying grouped labels and subtotals.

다음 표에서는 압축 형식 레이아웃을 사용할 때 행 레이블, 행 필드 및 부분합의 동작과 위치를 설명합니다.

행 레이블	행 필드	부분합
행 필드 레이블은 항상 내부 필드 레이블 위에 표시됩니다.	모든 행 필드는 하나의 열에 표시됩니다.	부분합은 각 그룹의 위쪽 또는 아래쪽에 표시할 수 있습니다.
필드를 쉽게 구분할 수 있도록 각 행 레이블은 위쪽 필드보다 약간 들여쓰기됩니다.		부분합을 설정하면 행 필드가 다음과 같이 변경됩니다. 위쪽: 부분합이 행 레이블 항목과 같은 기존 행에 추가됩니다. 아래쪽: 부분합이 아래쪽의 새 행에 추가됩니다.
행 레이블은 반복할 수 없습니다.		열 필드의 경우 부분합은 항상 아래쪽에 표시됩니다.
이 보고서 레이아웃에서만 필드의 들여쓰기를 변경할 수 있습니다.		부분합이 아래쪽에 있더라도 행 레이블은 위쪽에 유지됩니다.

다음 코드 샘플에서는 피벗 테이블에 압축 형식 레이아웃을 설정합니다.

myPivotTable.layoutType(GC.Spread.Pivot.PivotTableLayoutType.compact);

압축 형식 레이아웃에서는 rowLabelIndent 옵션을 사용하여 행 필드의 들여쓰기 수준을 사용자 지정할 수 있습니다.

SpreadJS Pivot Table Compact Form shows customized row-label indentation configured through the rowLabelIndent option.

다음 코드 샘플에서는 피벗 테이블의 압축 형식에서 들여쓰기를 설정합니다.

myPivotTable.options.rowLabelIndent = 12;

개요 형식

개요 형식 레이아웃은 각 행 필드를 별도의 열에 표시합니다. 이 레이아웃은 모든 필드 이름을 머리글 레이블로 표시하려고 하며 피벗 테이블의 너비가 중요하지 않은 경우에 유용합니다. 다음 이미지는 피벗 테이블의 개요 형식 레이아웃을 보여줍니다.

SpreadJS Pivot Table uses Outline Form to display each row field in a separate column with field headings and repeatable labels.

다음 표에서는 개요 형식 레이아웃을 사용할 때 행 레이블, 행 필드 및 부분합의 동작과 위치를 설명합니다.

행 레이블	행 필드	부분합
각 행 레이블은 별도의 행에 정의됩니다.	모든 행 필드는 각각 별도의 열에 표시됩니다.	부분합은 각 그룹의 위쪽 또는 아래쪽에 표시할 수 있습니다.
행 필드 레이블은 항상 내부 필드 레이블 위에 표시됩니다.	각 행 필드의 이름이 열 머리글에 표시됩니다.	부분합을 설정하면 행 필드가 다음과 같이 변경됩니다. 위쪽: 부분합이 행 레이블 항목과 같은 기존 행에 추가됩니다. 아래쪽: 부분합이 아래쪽의 새 행에 추가됩니다.
행 레이블을 반복할 수 있습니다.		열 필드의 경우 부분합은 항상 아래쪽에 표시됩니다.

행 레이블

행 필드

부분합

각 행 레이블은 별도의 행에 정의됩니다.

모든 행 필드는 각각 별도의 열에 표시됩니다.

부분합은 각 그룹의 위쪽 또는 아래쪽에 표시할 수 있습니다.

행 필드 레이블은 항상 내부 필드 레이블 위에 표시됩니다.

각 행 필드의 이름이 열 머리글에 표시됩니다.

부분합을 설정하면 행 필드가 다음과 같이 변경됩니다.

위쪽: 부분합이 행 레이블 항목과 같은 기존 행에 추가됩니다.
아래쪽: 부분합이 아래쪽의 새 행에 추가됩니다.

행 레이블을 반복할 수 있습니다.

열 필드의 경우 부분합은 항상 아래쪽에 표시됩니다.

다음 코드 샘플에서는 피벗 테이블에 개요 형식 레이아웃을 설정합니다.

myPivotTable.layoutType(GC.Spread.Pivot.PivotTableLayoutType.outline);

테이블 형식

테이블 형식 레이아웃은 관련 내부 필드의 첫 번째 레이블과 외부 필드의 행 레이블이 같은 행에 표시된다는 점을 제외하면 개요 형식 레이아웃과 유사합니다. 따라서 피벗 테이블의 행 수를 줄일 수 있습니다. 다음 이미지는 피벗 테이블의 테이블 형식 레이아웃을 보여줍니다.

SpreadJS Pivot Table uses Tabular Form to place row fields in separate columns while aligning outer labels with related inner labels.

다음 표에서는 테이블 형식 레이아웃을 사용할 때 행 레이블, 행 필드 및 부분합의 동작과 위치를 설명합니다.

행 레이블	행 필드	부분합
외부 필드의 행 레이블은 관련 내부 필드의 첫 번째 레이블과 같은 행에 표시됩니다.	모든 행 필드는 각각 별도의 열에 표시됩니다.	부분합은 각 그룹의 아래쪽에만 표시할 수 있습니다.
행 레이블을 반복할 수 있습니다.	각 행 필드의 이름이 열 머리글에 표시됩니다.	부분합을 아래쪽에 설정하면 아래쪽에 새 행이 추가됩니다.
		열 필드의 경우 부분합은 항상 아래쪽에 표시됩니다.

다음 코드 샘플에서는 피벗 테이블에 테이블 형식 레이아웃을 설정합니다.

myPivotTable.layoutType(GC.Spread.Pivot.PivotTableLayoutType.tabular);

추가 설정

부분합 및 총합계 설정

subtotalsPosition 및 grandTotalPosition 옵션을 사용하여 각각 부분합과 총합계의 위치를 설정할 수 있습니다. subtotalsPosition은 없음, 위쪽 또는 아래쪽 값으로 설정할 수 있으며(위에서 설명한 레이아웃에 따라 적용 가능), grandTotalPosition은 모든 레이아웃에서 없음, 모두, 열 또는 행과 같은 값으로 설정할 수 있습니다. 기본적으로 subtotalsPosition 옵션은 “아래쪽”으로 설정되고 grandTotalPosition 옵션은 “모두”로 설정됩니다.

다음 코드 샘플에서는 피벗 테이블에서 부분합 및 총합계의 위치를 설정합니다.

// Set SubtotalsPosition to none
myPivotTable.options.subtotalsPosition = GC.Spread.Pivot.SubtotalsPosition.none;
        
// Set grandTotalPosition to col
myPivotTable.options.grandTotalPosition = GC.Spread.Pivot.GrandTotalPosition.col;

또한 SpreadJS에서는 개별 필드의 부분합 위치를 조정하여 부분합의 표시를 개선할 수 있습니다. 현재 필드 부분합 위치는 subtotalsPosition.top 및 subtotalsPosition.bottom만 지원합니다.

pivotTable.add("Date","Date",GC.Spread.Pivot.PivotTableFieldType.rowField);
pivotTable.subtotalPosition("Date", GC.Spread.Pivot.SubtotalsPosition.top);

SpreadJS Pivot Table workflow demonstrates opening Field Settings and moving an individual field subtotal to the top of its group.

SpreadJS 디자이너에서는 현재 필드의 필드 설정 대화 상자를 사용하여 피벗 테이블 필드의 위쪽에 부분합을 표시하도록 설정할 수 있습니다. 그러나 피벗 테이블의 기본 부분합 위치는 아래쪽입니다.<

차원 부분합은 행 또는 열 필드에 대해 여러 부분합 함수를 표시할 수 있습니다. 여러 차원 부분합을 사용하도록 설정하면 기존 부분합 위치가 여러 부분합 행 또는 열로 확장됩니다. 자세한 내용은 차원 부분합을 참조하세요.

참고:
피벗 테이블의 압축 및 개요 레이아웃에서는 기본적으로 부분합이 아래쪽에 표시되지만 "테이블 형식" 레이아웃에서는 항상 아래쪽에 표시되며 위치를 변경할 수 없습니다.
피벗 테이블의 레이아웃을 재설정하면 필드의 subtotalPosition 상태가 피벗 테이블의 전역 부분합 위치로 재설정됩니다. 반대로 피벗 테이블의 부분합 위치를 재설정하면 각 필드의 subtotalPosition 상태가 동일한 전역 값으로 재설정됩니다.
현재 SpreadJS에서는 개별 필드의 순서를 변경하는 기능을 지원하지 않습니다.

개별 필드에 부분합 표시

Excel과 유사하게 피벗 테이블의 개별 필드에 부분합 정보를 표시할지 여부를 제어할 수 있습니다.

SpreadJS Pivot Table Tabular Form combines repeated outer labels with blank rows after items to improve grouped data readability.

특정 필드의 부분합 표시 여부를 관리하려면 subtotalVisible 메서드를 사용할 수 있습니다. 다음 코드 샘플에서는 "Date" 필드에 대한 부분합을 피벗 테이블에 표시합니다.

pivotTable.subtotalVisible("Date", true); // Value can be true or false

참고:
grandTotalPosition을 변경하면 모든 필드의 표시 여부 설정이 재설정됩니다.
필드의 부분합을 숨겨도 해당 위치(예: 위쪽 또는 아래쪽 표시 여부)에는 영향을 주지 않습니다.
마찬가지로 부분합 위치는 부분합의 표시 또는 숨김 여부에 영향을 주지 않습니다.
각 필드의 부분합은 개별적으로 숨기거나 표시할 수 있습니다.

항목 레이블 반복 설정

개요 형식 및 테이블 형식 레이아웃에서는 fillDownLabels 옵션을 사용하여 외부 행 필드의 항목 레이블을 반복해서 표시할 수 있습니다.

다음 코드 샘플에서는 테이블 형식 레이아웃에서 항목 레이블 반복을 true로 설정합니다.

// Set repeat label items
myPivotTable.options.fillDownLabels = true;

참고: 이 옵션은 압축 형식에는 적용할 수 없습니다.

빈 행 설정

insertBlankLineAfterEachItem 옵션을 사용하여 각 항목 뒤에 빈 행을 추가할 수 있으며, 이를 통해 데이터를 더 쉽게 파악할 수 있습니다.

다음 코드 샘플에서는 피벗 테이블의 각 항목 뒤에 빈 행을 설정합니다.

// Set blank rows with layout
myPivotTable.options.insertBlankLineAfterEachItem = true;

다음 이미지는 위에서 설명한 모든 추가 설정이 적용된 피벗 테이블의 테이블 형식 레이아웃을 보여줍니다.