[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

테마와 스타일

SpreadJS는 피벗 테이블의 외관을 변경하기 위해 테마와 스타일을 적용할 수 있도록 지원합니다.

테마

SpreadJS는 총 29개의 밝은(light), 28개의 중간(medium), 28개의 어두운(dark) 사전 정의된 테마를 제공하며, 이를 피벗 테이블에 적용할 수 있습니다. 아래 이미지는 light10 테마를 보여줍니다:



피벗 테이블의 테마를 변경하는 방법은 다음 중 하나입니다:

  • 피벗 테이블을 시트에 추가할 때 테마를 설정합니다. 다음 샘플 코드를 참조하시기 바랍니다.

    var myPivotTable = sheet.pivotTables.add("myPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.light10);

  • 아래와 같이 theme 옵션을 사용하여 테마를 설정합니다.

    myPivotTable.theme(GC.Spread.Pivot.PivotTableThemes.light10);

스타일

특정 데이터를 강조 표시하기 위해 피벗 테이블 스타일을 적용할 수 있습니다. style 메서드는 행 필드 또는 열 필드에 스타일을 적용하는 데 사용할 수 있습니다.

다음 이미지는 피벗 테이블의 열 필드에 적용된 스타일을 보여줍니다:



다음 코드는 열 필드에 스타일을 적용하는 방법을 보여줍니다:

function setMarkSubtotalPivotTableStyle(pivotTable) {
    // Qtr Total(분기 합계)을 특정 색상으로 표시하기 위한 스타일 생성
    let style = new GC.Spread.Sheets.Style();
    style.backColor = "#03A685";
    let subtotalLabelPivotArea = {
        labelOnly: true,
        references: [{
            fieldName: "Qt",
            subtotal: true,
            items: ["Qtr1", "Qtr2", "Qtr3", "Qtr4"]
        }]
    };
    // Qtr Total의 레이블 영역에 스타일 적용
    pivotTable.setStyle(subtotalLabelPivotArea, style);
    let subtotalDataPivotArea = {
        dataOnly: true,
        references: [{
            fieldName: "Qtr",
            subtotal: true,
            items: ["Qtr1", "Qtr2", "Qtr3", "Qtr4"]
        }]
    };
    pivotTable.setStyle(subtotalDataPivotArea, style);
}

다음 이미지는 피벗 테이블의 행 필드에 적용된 스타일을 보여줍니다:



다음 코드는 행 필드에 스타일을 적용하는 방법을 보여줍니다:

function setMarkSeattlePivotTableStyle(pivotTable) {
    // "Seattle" 도시 행을 강조하기 위한 스타일 생성 및 적용
    let seattlePivotArea = {
        references: [{
            fieldName: "City",
            items: ["Seattle"],
            applyLabel: true,
            applyData: true,
            applyGrandTotal: true,
            applySubtotal: true
        }]
    };
    let style = new GC.Spread.Sheets.Style();
    style.backColor = "yellow";
    pivotTable.setStyle(seattlePivotArea, style);
}