[]
        
(Showing Draft Content)

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

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

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

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

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

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

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

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

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

참고:

  • 피벗 테이블 스타일 이름은 고유해야 합니다.

    예: 이미 "TEST"라는 사용자 지정 피벗 테이블 스타일이 존재한다면, 동일한 이름의 스타일을 다시 만들 수 없습니다.

  • 피벗 테이블 스타일 이름은 대소문자를 구분하지 않습니다.

  • 스타일 이름이 피벗 테이블에 추가되면, 해당 이름으로 스타일을 검색합니다.

    이름이 내부 스타일과 일치하는 경우, 해당 스타일이 직접 적용됩니다. 그렇지 않은 경우 customStyles 컬렉션에서 해당 스타일을 검색하여 존재하면 적용됩니다. 없다면 기본 스타일이 적용됩니다.

  • defaultPivotTableTheme 값은 피벗 테이블 스타일 이름을 나타내는 문자열이어야 합니다.

  • 피벗 테이블이 명시적으로 스타일을 지정하지 않고 생성되었고, 기본 이름과 일치하는 스타일이 존재하는 경우 해당 스타일이 피벗 테이블에 적용됩니다.

  • 사용자 지정 피벗 테이블 테마는 구버전 Excel IO에서는 지원되지 않습니다.

코드 사용

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

  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) 버튼을 클릭합니다.

    image


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

    image


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


    image


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


    image


참고: 기본 제공 피벗 테이블 스타일은 수정하거나 삭제할 수 없습니다.