概述
本 Demo 展示了如何为数据透视表的不同区域设置自定义样式。通过三个工作表分别演示了三种样式定位方式：为特定季度汇总设置样式、为指定字段项目（"BMW"）设置样式，以及使用偏移量（offset）精确定位样式区域。
实现思路
创建数据源工作表，添加销售数据表格
在三个工作表中分别创建数据透视表，使用相同的销售数据源
为三个透视表设置不同的样式定位方式：
MarkQtrLayout：为第1和第3季度的汇总数据设置样式
MarkItemLayout：为 "BMW" 项目的所有单元格设置样式
MarkOffsetLayout：使用偏移量精确定位特定区域
绑定工作表切换事件，动态更新 PivotPanel
代码解析
为汇总项目设置样式
setMarkQtrStyle 函数为第1和第3季度的汇总数据设置样式。
这段代码使用 labelOnly: true 定位标签区域，dataOnly: true 定位数据区域。subtotals: true 表示针对汇总项目，items 数组指定要设置样式的具体项目。
为字段项目设置样式
setMarkItemStyle 函数为 "BMW" 项目的所有单元格设置样式。
这段代码通过 fieldName 指定字段名称（"Cars"），通过 items 数组指定要设置样式的项目（"BMW"）。样式会应用到该项目的标签和数据区域。
使用偏移量精确定位样式
setMarkOffsetStyle 函数演示了如何使用 offset 属性精确定位样式区域。
这段代码展示了两种偏移量用法：
第一种：结合 references 使用，从 "Alan" 项目开始偏移 1 行，设置 3 行 1 列的样式
第二种：使用 type: GC.Spread.Pivot.PivotAreaType.corner 定位角落区域，然后使用偏移量精确定位
运行效果
MarkQtrLayout 工作表：第1季度和第3季度的汇总标签和数据区域显示为绿色背景、白色文字
MarkItemLayout 工作表：所有 "BMW" 项目的标签和数据单元格显示为橙色背景
MarkOffsetLayout 工作表：从 "Alan" 项目偏移的区域以及数据透视表角落的特定单元格显示为橙色背景
切换工作表时，右侧的 PivotPanel 会自动更新为当前透视表
API 参考
setStyle 方法
pivotArea：IPivotArea 对象，定义要设置样式的区域
style：GC.Spread.Sheets.Style 对象，定义样式属性
IPivotArea 接口
labelOnly：boolean，可选，仅应用于标签区域
dataOnly：boolean，可选，仅应用于数据区域
type：PivotAreaType 枚举，可选，指定透视表区域类型（如 corner、topRight）
references：IPivotReference[] 数组，指定字段和项目引用
offset：IPivotAreaOffset 对象，可选，使用偏移量精确定位
IPivotReference 接口
fieldName：string，字段名称
items：string[]，可选，项目名称数组
subtotal：boolean，可选，是否针对汇总项目
IPivotAreaOffset 接口
row：number，行偏移量
col：number，列偏移量
rowCount：number，可选，行数
colCount：number，可选，列数
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 4 });
initSpread(spread);
let markQtrLayout = spread.getSheet(0);
let markQtrPivotTable = this.initMarkQtr(markQtrLayout);
let markitemLayout = spread.getSheet(1);
let markItemPivotTable = this.initMarkItem(markitemLayout);
let markOffsetLayout = spread.getSheet(2);
let markOffsetPivotTable = this.initMarkOffset(markOffsetLayout);
setMarkQtrStyle(markQtrPivotTable);
setMarkItemStyle(markItemPivotTable);
setMarkOffsetStyle(markOffsetPivotTable);
bindEvent(spread);
};
function initSpread(spread) {
spread.suspendPaint();
let sheet = spread.getSheet(3);
sheet.name("DataSource");
sheet.setRowCount(117);
sheet.setColumnWidth(0, 120);
sheet.getCell(-1, 0).formatter("YYYY-mm-DD");
sheet.getRange(-1,4,0,2).formatter("$ #,##0");
let table = sheet.tables.add('tableSales', 0, 0, 117, 6);
for(let i=2;i<=117;i++)
{
sheet.setFormula(i,5,'=D'+i+'*E'+i)
}
table.style(GC.Spread.Sheets.Tables.TableThemes["none"]);
sheet.setArray(0, 0, pivotSales);
let sheet0 = spread.getSheet(0);
sheet0.name("MarkQtrLayout");
sheet0.setValue(0,0, "A style is applied for the 1st and 3rd Quarter Subtotal.");
let sheet1 = spread.getSheet(1);
sheet1.name("MarkItemLayout");
sheet1.setValue(0,0, "This style is only applied to 'BMW' and will be applied whether this field is being displayed in the PivotTable or not. ");
let sheet2 = spread.getSheet(2);
sheet2.name("MarkOffsetLayout");
sheet2.setValue(0,0, "This style is only applied to the offset area of the 'Alan' item");
spread.resumePaint();
}
function initMarkQtr(sheet) {
let myPivotTable = sheet.pivotTables.add("markQtrPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.light8);
myPivotTable.suspendLayout();
myPivotTable.options.showRowHeader = true;
myPivotTable.options.showColumnHeader = true;
myPivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField);
myPivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.rowField);
let groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }] };
myPivotTable.group(groupInfo);
myPivotTable.add("季度 (date)", "季度 (date)",GC.Spread.Pivot.PivotTableFieldType.columnField);
myPivotTable.add("quantity", "Sum of Quantity", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel"));
myPivotTable.resumeLayout();
myPivotTable.autoFitColumn();
return myPivotTable;
}
function initMarkItem(sheet) {
let myPivotTable = sheet.pivotTables.add("markItemPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.light8);
myPivotTable.suspendLayout();
myPivotTable.options.showRowHeader = true;
myPivotTable.options.showColumnHeader = true;
myPivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField);
myPivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.rowField);
myPivotTable.add("季度 (date)", "季度 (date)",GC.Spread.Pivot.PivotTableFieldType.columnField);
myPivotTable.add("quantity", "Sum of Quantity", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
myPivotTable.resumeLayout();
myPivotTable.autoFitColumn();
return myPivotTable;
}
function initMarkOffset(sheet) {
let myPivotTable = sheet.pivotTables.add("markOffsetPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.light8);
myPivotTable.suspendLayout();
myPivotTable.options.showRowHeader = true;
myPivotTable.options.showColumnHeader = true;
myPivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField);
myPivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.rowField);
myPivotTable.add("季度 (date)", "季度 (date)",GC.Spread.Pivot.PivotTableFieldType.columnField);
myPivotTable.add("quantity", "Sum of Quantity", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
myPivotTable.resumeLayout();
myPivotTable.autoFitColumn();
return myPivotTable;
}
function _getElementById(id) {
return document.getElementById(id);
}
function setMarkQtrStyle (pivotTable) {
let style = new GC.Spread.Sheets.Style();
style.backColor = "#82bc00";
style.foreColor = "white";
let labelPivotArea = {
labelOnly: true,
references: [{
fieldName: "季度 (date)",
subtotals: true,
items: ["季度1", "季度3"]
}]
};
pivotTable.setStyle(labelPivotArea, style);
let dataPivotArea = {
dataOnly: true,
references: [{
fieldName: "季度 (date)",
subtotals: true,
items: ["季度1", "季度3"]
}]
};
pivotTable.setStyle(dataPivotArea, style);
}
function setMarkItemStyle (pivotTable) {
let style = new GC.Spread.Sheets.Style();
style.backColor = "rgb(247, 167, 17)";
let labelPivotArea = {
labelOnly: true,
references: [{
fieldName: "Cars",
items: ["BMW"]
}]
};
pivotTable.setStyle(labelPivotArea, style);
let dataPivotArea = {
dataOnly: true,
references: [{
fieldName: "Cars",
items: ["BMW"]
}]
};
pivotTable.setStyle(dataPivotArea, style);
}
function setMarkOffsetStyle (pivotTable) {
let style = new GC.Spread.Sheets.Style();
style.backColor = "rgb(247, 167, 17)";
let labelPivotAreaWithOffset = {
labelOnly: true,
references: [{
fieldName: "Salesperson",
items: ["Alan"]
}],
offset: {
row: 1,
col: 0,
rowCount: 3,
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);
let topRightPivotAreaWithOffset = {
type: GC.Spread.Pivot.PivotAreaType.topRight,
offset: {
row: 0,
col: 0,
rowCount: 1,
colCount: 4
}
};
pivotTable.setStyle(topRightPivotAreaWithOffset, style);
}
function bindEvent(spread){
spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanged, function(e, args) {
let panel = GC.Spread.Pivot.PivotPanel.findControl("panel");
let pivotTable = args.newSheet.pivotTables.all()[0];
let panelContainer = _getElementById("panel");
if (!pivotTable) {
panelContainer.style.display = "none";
} else {
panelContainer.style.display = "unset";
panel.attach(pivotTable);
}
});
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/pivot-data.js" type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="sample-panel">
<div id="panel"></div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
}
.sample-spreadsheets {
width: calc(100% - 300px);
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
.sample-panel {
float: right;
width: 300px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.gc-panel {
padding: 10px;
background-color: rgb(230, 230, 230);
}
#panel {
position: absolute;
right: 0;
width: 300px;
height: 100%;
top: 0;
}
#app {
height: 100%;
}
