사용자 지정 피벗 테이블 스타일

SpreadJS는 사용자 지정 피벗 테이블 스타일을 추가, 제거 및 수정하여 피벗 테이블 테마를 관리할 수 있도록 지원합니다. 이러한 스타일은 피벗 테이블에 적용할 수 있으며, 스타일을 적용하려면 스타일 이름만 설정하면 됩니다.

피벗 테이블 스타일은 GC.Spread.Sheets.WorkBook 클래스의 customPivotTableThemes 속성을 사용하여 사용자 지정할 수 있습니다. CustomPivotTableThemesManager 클래스는 사용자 지정 피벗 테이블 테마를 관리하기 위한 다음과 같은 메서드를 제공합니다:

• all: 모든 사용자 지정 피벗 테이블 테마 가져오기

• get: 이름으로 특정 사용자 지정 피벗 테이블 테마 가져오기

• add: 스타일 객체 또는 이름을 사용하여 새 사용자 지정 피벗 테이블 테마 추가

• remove: 이름으로 사용자 지정 피벗 테이블 테마 제거

• update: 이름 또는 스타일 객체를 사용하여 기존 사용자 지정 피벗 테이블 테마 업데이트

또한 GC.Spread.Sheets.WorkBook 클래스의 defaultPivotTableTheme 메서드를 사용하면 모든 피벗 테이블에 일관된 스타일을 적용할 수 있도록 기본 피벗 테이블 스타일을 효과적으로 관리할 수 있습니다.

코드 사용

다음 코드는 사용자 지정 피벗 테이블 테마를 관리하는 데 필요한 다양한 메서드를 보여줍니다.

1. 새 피벗 테이블 테마 추가

   const spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
   
   // "custom0"이라는 이름의 새 피벗 테이블 테마 추가
   const pivotTableStyle = spread.customPivotTableThemes.add("custom0");
   const firstColumnStripeStyle = new GC.Spread.Pivot.PivotTableStyle();
   firstColumnStripeStyle.backColor = "skyblue";
   pivotTableStyle.firstColumnStripeStyle(firstColumnStripeStyle);

2. 피벗 테이블 테마 가져오기

   // 피벗 테이블 테마 가져오기
   const pivotTableStyle = spread.customPivotTableThemes.get("custom0");

3. 피벗 테이블 테마 적용

   // 피벗 테이블 생성
   const sourceData = [["Date","Buyer","Type","Amount"],
   ["01-Jan","Mimi","Fuel",74],
   ["15-Jan","Mary","Food",235],
   ["17-Jan","Denny","Sports",20],
   ["21-Jan","Kelly","Books",125]];
   activeSheet.setArray(0, 0, sourceData);
   activeSheet.tables.add('sourceData', 0, 0, 5, 4);
   
   // 피벗 테이블 테마 설정
   const pivotTable = activeSheet.pivotTables.add(
   "pivottable1",
   "sourceData",
   1,
   1,
   GC.Spread.Pivot.PivotTableLayoutType.compact,
   GC.Spread.Pivot.PivotTableThemes.medium2
   );
   
   // 스타일을 피벗 테이블에 적용
   pivotTable.theme("custom0");

4. 피벗 테이블 테마 수정

   기존 피벗 테이블 스타일을 변경하면 해당 스타일이 적용된 모든 테이블에 자동으로 업데이트됩니다.

   // 피벗 테이블 테마 수정
   const pivotTableStyle = spread.customPivotTableThemes.get("custom0");
   pivotTableStyle.firstColumnStripeStyle().backColor = "red";
   
   // 피벗 테이블 테마 업데이트
   spread.customPivotTableThemes.update("custom0", new GC.Spread.Pivot.PivotTableTheme());

5. 기존 테마 삭제

   사용자 지정 피벗 테이블 스타일을 삭제하면 해당 스타일을 사용 중이던 모든 테이블은 기본 스타일로 전환됩니다.

   // 피벗 테이블 테마 삭제
   spread.customPivotTableThemes.remove("custom0");

6. 기본 테마 설정

   // 기본 피벗 테이블 테마 설정
   spread.defaultPivotTableTheme("custom0");

디자이너에서 사용

SpreadJS 디자이너를 사용하여 사용자 지정 피벗 테이블 스타일을 포맷할 수도 있습니다. 아래 단계를 따르시기 바랍니다:

1. 디자인(DESIGN) 탭의 피벗테이블 스타일(PivotTable Styles) 그룹에서 피벗테이블 스타일(PivotTableStyles) 버튼을 클릭합니다.

   
   

   
   

2. 드롭다운 화살표를 클릭하고 새 피벗 테이블 스타일(New Pivot Table Style..) 옵션을 선택하여 필요한 스타일 요소를 설정해 새 피벗 테이블 스타일을 추가합니다.

   
   

   
   

3. 사용자가 생성한 모든 피벗 테이블 스타일은 스타일 목록의 사용자 지정(Custom) 섹션에 표시됩니다.

   
   

   
   

   
   

4. 사용자 지정 피벗 테이블 스타일을 마우스 오른쪽 버튼으로 클릭하여, 필요에 따라 적용, 수정, 복제, 삭제, 기본값으로 설정 등의 작업을 수행할 수 있습니다.