[]
        
(Showing Draft Content)

피벗 테이블 레이아웃

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

  • 압축 형식

  • 개요 형식

  • 표 형식

압축 형식

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



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

행 레이블

행 필드

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

모든 행 필드는 하나의 열에 표시됩니다.

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

각 행 레이블은 상위 필드보다 약간 들여쓰기 되어 필드를 이해하기 쉽게 합니다.


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

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

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

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


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

이 레이아웃에서만 필드의 들여쓰기 수준을 변경할 수 있습니다.


소계가 아래에 있더라도 행 레이블은 항상 위쪽에 표시됩니다.

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

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

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


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

myPivotTable.options.rowLabelIndent = 12;

개요 형식

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




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

행 레이블

행 필드

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

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

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

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

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

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

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

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

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


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

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

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

표 형식

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



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

행 레이블

행 필드

외부 필드의 행 레이블은 관련 내부 필드의 첫 번째 레이블과 같은 행에 표시됩니다.

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

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

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

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

소계를 아래에 설정하면, 새 행이 아래쪽에 추가됩니다.



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

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

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

추가 설정

Subtotals 및 GrandTotals 설정

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

  • 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.topsubtotalsPosition.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과 유사하게, 특정 필드의 소계 표시 여부를 제어할 수 있습니다.

image


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

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

참고:

  • grandTotalPosition을 변경하면 모든 필드의 소계 표시 설정이 초기화됩니다.

  • 필드의 소계를 숨겨도 해당 위치(top/bottom)는 영향을 받지 않습니다.

    소계 위치 역시 소계 표시 여부에 영향을 주지 않습니다.

  • 개별 필드별로 소계 표시 여부를 독립적으로 설정할 수 있습니다.

레이블 항목 반복 설정

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

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

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

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

빈 행 설정

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

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

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

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