主题和样式

SpreadJS 允许您在数据透视表上应用主题和样式以更改其外观。

主题

SpreadJS 提供了 29 个浅色、28 个中色和 28 个深色预定义主题，可以应用于数据透视表。下图显示了 light10 主题：

您可以通过以下方式之一更改数据透视表的主题：

• 在向电子表格添加数据透视表时设置主题。请参阅以下示例代码。

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

• 使用主题选项设置主题，如下所示。

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

样式

您可以应用数据透视表样式来突出显示任何特定数据。style方法可用于样式应用到行和列字段。下图显示了数据透视表的列字段的样式。

以下示例代码显示了如何为列字段应用样式。

function setMarkSubtotalPivotTableStyle(pivotTable) {
    // 创建样式以特定颜色标记 Qtr Total's
    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's
    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);
}