피벗 테이블 레이아웃

SpreadJS는 PivotTableLayoutType 열거형을 사용하여 피벗 테이블의 레이아웃을 선택하고 적용할 수 있도록 지원합니다.

압축 형식
개요 형식
표 형식

압축 형식

압축 형식은 피벗 테이블의 기본 보고서 레이아웃이며, 각 행 레이블을 동일한 열에 개별 행으로 표시합니다. 이 레이아웃은 이름처럼 피벗 테이블의 너비를 줄여 데이터를 압축된 형태로 표현합니다. 아래 이미지는 압축 형식 레이아웃의 예시입니다.

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

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

다음 코드는 피벗 테이블에 압축 형식 레이아웃을 설정하는 예시입니다:

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

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

다음은 들여쓰기를 설정하는 코드 예시입니다:

myPivotTable.options.rowLabelIndent = 12;

개요 형식

개요 형식 레이아웃은 각 행 필드를 개별 열에 표시합니다. 이 레이아웃은 모든 필드 이름을 헤딩 레이블로 표시하고자 할 때 유용하며, 피벗 테이블 너비에 제약이 없을 때 적합합니다. 아래 이미지는 개요 형식 레이아웃의 예시입니다.

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

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

행 레이블

행 필드

소

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

모든 행 필드는 개별 열에 표시됩니다.

소계는 각 그룹의 위 또는 아래에 표시될 수 있습니다.

행 필드 레이블은 항상 내부 필드 레이블 위에 위치합니다.

각 행 필드는 열 머리글에 이름을 표시합니다.

소계를 설정하면 다음과 같이 행 필드가 변경됩니다:

Top: 기존 행에 소계를 행 레이블 항목 옆에 추가

Bottom: 새 행에 소계를 아래쪽에 추가

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

열 필드의 경우, 소계는 항상 아래쪽에 표시됩니다.

다음 코드는 개요 형식 레이아웃을 설정하는 예시입니다:

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

표 형식

표 형식 레이아웃은 개요 형식과 유사하지만, 외부 필드의 행 레이블이 관련 내부 필드의 첫 번째 레이블과 같은 행에 위치한다는 점이 다릅니다. 따라서 피벗 테이블의 행 수를 줄일 수 있습니다. 아래 이미지는 표 형식 레이아웃의 예시입니다.

다음 표는 표 형식 레이아웃을 사용할 때 행 레이블, 행 필드 및 소계의 동작과 위치를 설명합니다:

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

다음 코드는 표 형식 레이아웃을 설정하는 예시입니다:

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

추가 설정

Subtotals 및 GrandTotals 설정

subtotalsPosition 및 grandTotalPosition 옵션을 사용하여 소계 및 총계의 위치를 설정할 수 있습니다.

subtotalsPosition: none, top, bottom 값을 가질 수 있으며 기본값은 bottom입니다.
grandTotalPosition: none, both, col, row 값을 사용할 수 있으며 기본값은 both입니다.

다음은 소계 및 총계 위치를 설정하는 예시입니다:

// 소계 위치를 none으로 설정
myPivotTable.options.subtotalsPosition = GC.Spread.Pivot.SubtotalsPosition.none;

// 총계 위치를 열 방향(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);

pt-subtotal

SpreadJS 디자이너에서는 해당 필드의 필드 설정(Field Settings) 대화상자를 사용하여 소계 위치를 위로 설정할 수 있습니다. 단, 기본값은 아래(bottom)입니다.

subtotal-designer-dialog

참고:
압축 및 개요 레이아웃에서는 기본적으로 소계를 아래쪽에 표시합니다. 표 형식 레이아웃은 소계를 항상 아래에만 표시하며, 위치 변경은 허용하지 않습니다.
피벗 테이블의 레이아웃을 재설정하면 각 필드의 subtotalPosition 설정이 전역 설정값으로 재설정됩니다.
전역 소계 위치를 재설정하면 모든 필드의 subtotalPosition이 동일한 전역값으로 재설정됩니다.
현재 SpreadJS는 단일 필드의 순서를 재배치하는 기능은 지원하지 않습니다.

필드별 소계 표시 여부 설정

Excel과 유사하게, 특정 필드의 소계 표시 여부를 제어할 수 있습니다.

다음은 subtotalVisible 메서드를 사용하여 "Date" 필드에 대해 소계를 표시하는 예시입니다:

pivotTable.subtotalVisible("Date", true); // true 또는 false 설정 가능

참고:
grandTotalPosition을 변경하면 모든 필드의 소계 표시 설정이 초기화됩니다.
필드의 소계를 숨겨도 해당 위치(top/bottom)는 영향을 받지 않습니다.
소계 위치 역시 소계 표시 여부에 영향을 주지 않습니다.
개별 필드별로 소계 표시 여부를 독립적으로 설정할 수 있습니다.

레이블 항목 반복 설정

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

다음은 fillDownLabels 옵션을 활성화하는 예시입니다:

// 레이블 항목 반복 설정
myPivotTable.options.fillDownLabels = true;

참고: 이 옵션은 압축 형식 레이아웃에서는 사용할 수 없습니다.

빈 행 설정

각 항목 뒤에 빈 행을 추가하여 데이터를 보다 쉽게 이해할 수 있도록 할 수 있습니다. 이를 위해 insertBlankLineAfterEachItem 옵션을 사용할 수 있습니다.

다음은 항목마다 빈 행을 추가하는 예시입니다:

// 항목마다 빈 행 추가
myPivotTable.options.insertBlankLineAfterEachItem = true;

다음 이미지는 위에서 설명한 모든 추가 설정이 적용된 표 형식 레이아웃을 보여줍니다: