数据透视表设置

您可以修改数据透视表的设置以使其更易于理解。

自适应列

autoFitColumn方法可以根据数据自适应透视表列。下面的 GIF 演示了数据透视表中的自动调整列。

以下示例代码显示了如何自动调整数据透视表中的列。

// 自动适应列
myPivotTable.autoFitColumn();

计算字段

您可以将自定义字段添加到使用公式计算值的数据透视表的值字段区域。您可以在公式中使用常量或引用数据透视表的其他字段。

可以使用addCalcField方法添加计算字段。此外，您可以分别使用getCalcFields和removeCalcField方法获取和删除计算字段信息。

在下图中，数据透视表中添加了计算字段“Tax”。

以下示例代码显示了如何在数据透视表中添加、获取和删除计算字段。

// 添加计算字段“Tax”，等于 UnitPrice 字段的 0.08%
// UnitPrice is one of PivotTable's measure field
myPivotTable.addCalcField("Tax", "=UnitPrice*0.08");
myPivotTable.add("Tax", "Tax Calculated is 0.08 percent of Unit Price", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);

//  获取计算字段
calcFieldsInfo = myPivotTable.getCalcFields();
// 在新工作表中添加计算字段的名称
for (var i = 0; i < calcFieldsInfo.length; i++) {
    calcFieldSheet.setValue(i + 1, 0, calcFieldsInfo[i].fieldName);
    calcField = calcFieldsInfo[i].fieldName;
    calcFieldSheet.setValue(i + 1, 1, calcFieldsInfo[i].formula);
}

// 删除计算字段
myPivotTable.removeCalcField(calcField);

计算项

您可以将计算项目添加到行或列字段区域，在该区域中，它使用指定的公式计算数据透视表中的特定项目。您可以在公式中使用常量或引用数据透视表的其他字段

可以使用 addCalcItem方法添加计算项。此外，您可以分别使用getCalcItems、updateCalcItem和 removeCalcItem方法获取、更新和删除计算项。

计算项的行为

无法在数据透视表报表区域中的多个字段上实现计算项。
计算项的公式可以参考数据透视表的数据，而不是工作表的数据。
SpreadJS可以在被分组的字段中添加计算项，在分组字段中添加基础信息。
如果您有数字组字段或日期组字段，则只有选择组才能添加计算项。
对数据透视表的所有引用都必须遵循“SourceFieldName[itemName]”格式。
数据透视报表中所有值字段的“计算类型”只能是以下之一：TypeSum、Count、Max、Min、Product、Count Numbers。
计算项中的字段不能存在于数据透视报表的筛选区域中。
SpreadJS 允许我们设置 calcItem 的值是否应该聚合到小计中。

在下图中，计算项目 "Category[Bakery+Beverages]" 被添加到数据透视表中。

以下示例代码显示了如何在数据透视表中添加、更新和删除计算字段。

// Add Calculated Item "Category[Bakery+Beverages]" which is equal to "Category[Bakery] + Category[Beverages]"
function addCalcItem(myPivotTable) {
    myPivotTable.addCalcItem("Category", "Category[Bakery + Beverages]", "=Category[Bakery] + Category[Beverages]");
    myPivotTable.autoFitColumn();
    return myPivotTable;
}

// Update calculated item
function updateCalcItem(myPivotTable) {
    myPivotTable.updateCalcItem("Category", "Category[Bakery + Beverages]", "=Category[Bakery] - Category[Beverages]", 1);
    myPivotTable.options.calcItemAggregation = GC.Spread.Pivot.CalcItemAggregation.include;
    myPivotTable.autoFitColumn();
    return myPivotTable;
}

// Remove calculated item
function deleteCalcItem(myPivotTable) {
    myPivotTable.removeCalcItem("Category", "Category[Bakery + Beverages]");
    myPivotTable.autoFitColumn();
    return myPivotTable;
}

条件规则

您可以使用addConditionalRule方法在数据透视区域上应用条件规则。此外，您可以使用getConditionalRules和[removeConditionalRule](/spreadjs/api/GC. Spread.Pivot.PivotTable.html#removeConditionalRule)方法。无论数据透视表布局如何更改，条件规则都会按预期工作。

下图显示了值单元格中的颜色格式条件规则。

以下示例代码显示了如何在数据透视表中应用条件规则。

// 添加条件规则
myPivotTable.addConditionalRule([{ dataOnly: true, references: [{ fieldName: "City", items: ["Seattle"] }] }], new GC.Spread.Sheets.ConditionalFormatting.ScaleRule(GC.Spread.Sheets.ConditionalFormatting.RuleType.threeScaleRule, 1 /* LowestValue */, 0, "lightblue", 0 /* Number */, 500, "yellow", 2 /* HighestValue */, 2000, "green"));

合并并居中带有标签的单元格

您可以使用mergeItem选项合并并居中对齐带有标签的单元格。此选项接受布尔值并根据数据透视表的定义布局工作，如下所述：

选项	紧凑型	区域分组型	表格型
Merge	只有列头	只有列头	行头和列头
Center	只有列头	行头和列头	行头和列头

在下面的 GIF 中，带有标签的单元格使用mergeItem选项合并并居中。

以下示例代码显示了如何在数据透视表中合并和居中对齐带有标签的单元格。

// 合并并居中标记单元格
myPivotTable.options.mergeItem = true;

数据透视表工具提示

您可以在数据透视表中启用工具提示以了解数据的其他含义。当鼠标悬停在枢轴数据上时，会出现工具提示数据。但是，如果值字段中没有明确的信息，则不会显示工具提示。您可以使用 showToolTip选项在行/列标题区域、数据区域和小计/grandTotal 区域中显示工具提示。

下图显示了当鼠标悬停在透视数据上时的工具提示。

以下示例代码显示了如何在数据透视表中启用工具提示。

//  在数据透视表中显示工具提示
myPivotTable.options.showToolTip = true;

数据透视表序列化和反序列化

您可以使用序列化和保存数据透视表数据序列化方法以及使用该序列化的数据透视表数据恢复到现有的数据透视表反序列化方法。序列化支持以下数据透视表数据：字段、选项、筛选、排序、布局、数据透视表位置和主题。

以下示例代码序列化并保存数据透视表数据，打印序列化信息并将数据恢复到现有数据透视表。

// 使用serialize方法保存数据透视表数据
serialization = myPivotTable.serialize();
// 打印序列化信息
info = JSON.stringify(serialization, null, 2);
console.log(info);

// 使用反序列化方法恢复数据
myPivotTable.deserialize(serialization);

将空值显示为

SpreadJS 提供了以下选项来选择在数据透视表数据源中存在空值时是否显示任何自定义值。

showMissing 指示当实际值为空时是否应显示任何值。它接受布尔值并且默认为true。
missingCaption 指示当实际值为空时应显示什么值。它接受字符串和数字值，默认为空。

下图在数据透视表中将空值显示为'No Sales'

以下示例代码显示如何显示字符串值代替空值。

// 在空单元格中显示自定义值 
myPivotTable.options.showMissing = true;
myPivotTable.options.missingCaption = "No Sales";

显示没有数据的项

您可以使用showNoData方法在数据透视表中显示没有数据的项目，并选择是否在字段中显示空白单元格。此方法接受参数，例如字段名称和是否应显示项目的布尔值。

此设置通过管理项目在数据透视表中的可见性来帮助用户比较数据源的项目。数据的可见性不取决于它是否具有任何值。

下图显示了每个商店的数据，包括没有销售的时期。

以下示例代码显示了如何显示没有数据的项目。

function initPivotTable(sheet) {
    myPivotTable = sheet.pivotTables.add("myPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.dark3);
    myPivotTable.suspendLayout();
    myPivotTable.add("City", "City", GC.Spread.Pivot.PivotTableFieldType.rowField);
    myPivotTable.add("OrderDate", "OrderDate", GC.Spread.Pivot.PivotTableFieldType.rowField);
    myPivotTable.add("Product", "Product", GC.Spread.Pivot.PivotTableFieldType.rowField);
    let groupInfo = { originFieldName: "OrderDate", dateGroups: [{ by: GC.Pivot.DateGroupType.months }] };
    myPivotTable.group(groupInfo);
    myPivotTable.add("Quantity", "Quantity", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
    
    // 将 showNoData 设置为 true 以显示没有数量的产品
    myPivotTable.showNoData("Product", true);
    myPivotTable.resumeLayout();
    myPivotTable.autoFitColumn();
    return myPivotTable;
}

数据透视表将数据显示为

您可以使用showDataAs方法将数据透视表数据显示为不同类型的计算值。此方法接受字段名称和IPivotShowDataAsInfo对象属性。可以使用PivotShowDataAs枚举将值字段设置为不同的计算。 method. This method accepts field name and IPivotShowDataAsInfo object properties. The value fields can be set to different calculations using PivotShowDataAs enumeration.

在下面的 GIF 中，数据透视表显示了“Years”字段的运行总值

以下示例代码显示了如何显示 Years 的运行总值。

// 使用 showDataAs 方法
myPivotTable.showDataAs("Sum of quantity", { showDataAs: GC.Pivot.PivotShowDataAs.runTotal, baseFieldName: "Years" });

显示或隐藏标题

您可以通过 showHeaders 属性设置数据透视表是否显示行列方向的字段名称。默认设置为true。

在下面的 GIF 中，数据透视表显示并隐藏行和列标题。

以下示例代码显示了如何隐藏标题。

// set showHeader option to False to hide headers of pivot table
pt.options.showHeaders = false;

JSON导入导出没有样式

在将电子表格导入或导出为 JSON 格式时，您可以选择保留或删除数据透视表样式。 toJSON 的 ignorestyle 参数和 fromJSON 设置为 true 时的方法，删除数据透视缓存和数据透视表，同时保留数据透视表值。

下图显示了从 JSON 文件导入时没有样式的数据透视表。

以下示例代码展示了如何在没有样式的情况下导入或导出一个json文件。

function bindExcelIOEvent(spread) {
    // import ssjson file when IgnoreStyle parameter is set to true
    var openButton = document.getElementById('openButton');
    openButton.addEventListener('click', function () {
        var file = document.getElementById("importFileName").files[0];
        var fileName = file.name;
        var suffix = fileName.substr(fileName.lastIndexOf('.'));

        if (suffix === '.ssjson' || suffix === 'json') {
            var reader = new FileReader();
            reader.onload = function () {
                var spreadJson = JSON.parse(this.result);
                spread.fromJSON(spreadJson, { ignoreStyle: true });
            };
            reader.readAsText(file);
        }
    });
    // export ssjson file when IgnoreStyle option is set to true
    var saveSSJSONButton = document.getElementById('saveSSJSONButton');
    saveSSJSONButton.addEventListener('click', function () {
        var fileName = "ExportedFile";
        var index = fileName.lastIndexOf('.');
        if (index >= 0) {
            fileName = fileName.substr(0, index) + '.ssjson';
        } else {
            fileName += '.ssjson';
        }
        var json = spread.toJSON({ includeBindingSource: true, ignoreStyle: true }),
            text = JSON.stringify(json);
        saveAs(new Blob([text], { type: "text/plain;charset=utf-8" }), fileName);
    });
}