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