[]
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);
}

피벗 영역 오프셋 설정

SpreadJS는 특정 피벗 영역을 스타일링할 수 있는 offset 속성을 제공합니다. 기본 오프셋은 피벗 영역의 좌측 상단 셀(0,0)을 기준 셀로 하여 범위를 정의합니다.

offset 속성을 설정하려면 row, col, rowCount, colCount를 포함하는 IPivotAreaOffset 인터페이스를 구현할 수 있습니다.

  • row와 col: 기준 셀의 행과 열 오프셋을 나타냅니다.

  • rowCount와 colCount: 스타일링할 행과 열의 개수를 나타냅니다.

단, 오프셋은 코너 영역(corner area), 우측 상단 영역(top right area), 총합 영역(grand total area), 행 헤더(row header) 등 지정된 영역에만 적용됩니다.

row, col, rowCount, colCount 설정 규칙은 다음과 같습니다:

  • rowCount와 colCount가 숫자가 아니거나 2보다 작으면 1로 처리됩니다.

  • row와 col이 무한대(infinity)이면 피벗 영역의 마지막 행 또는 열을 의미합니다.

  • rowCount와 colCount가 무한대(infinity)이면 해당 피벗 테이블의 마지막 행/열까지의 개수를 의미합니다.

예제

아래 이미지는 두 가지 사례를 보여줍니다. 첫 번째 사례는 라벨 참조를 사용하여 offset 속성을 설정한 경우입니다. 두 번째 사례는 PivotAreaType 열거형을 사용해 코너 영역을 정의하고, offset 속성을 설정하여 피벗 테이블의 특정 영역을 지정한 경우입니다.

pivotarea-offset.dcdc60.png

다음 코드 샘플은 특정 피벗 영역에 offset 속성을 설정하는 방법을 보여줍니다.

let style = new GC.Spread.Sheets.Style();
style.backColor = "rgb(247, 167, 17)";

let labelPivotAreaWithOffset = {
    labelOnly: true,
    references: [{
        fieldName: "Region",
        items: ["East"]
    }],
    offset: {
        row: 0,
        col: 0,
        rowCount: 2,
        colCount: 1
    }
};
pivotTable.setStyle(labelPivotAreaWithOffset, style);

let cornerPivotAreaWithOffset = {
    type: GC.Spread.Pivot.PivotAreaType.corner,
    offset: {
        row: 0,
        col: 1,
        rowCount: 1,
        colCount: 1
    }
};
pivotTable.setStyle(cornerPivotAreaWithOffset, style);