基于纯前端类Excel表格控件实现在线损益表应用( 二 ) _生活百科

我们将使用计算字段功能在数据透视表中添加差异和差异百分比。

单击数据透视表分析。
字段、项目和集合 → 计算字段。
设置计算字段的名称差异。
要在公式中添加字段，请选择该字段，然后单击“插入字段” 。
单击添加按钮。

文章插图
或用JavaScript实现：

pivotTable.addCalcField('diff', '=Actual-Budget');pivotTable.add("diff", "Difference", GC.Spread.Pivot.PivotTableFieldType.valueField); pivotTable.addCalcField('diff%', '=Actual/Budget-1');pivotTable.add("diff%", "Difference %", GC.Spread.Pivot.PivotTableFieldType.valueField);

我们添加的两个字段是差异和差异 % 。使用的公式如下：

文章插图
添加切片器切片器作为用于过滤数据透视表的新功能。使用此功能按地区和财政年度过滤数据。
如果使用的是设计器，执行以下操作：

单击数据透视表分析
插入切片器
选择地区和财政年度

文章插图
或使用JavaScript实现：

var regionSlicer = sheet.slicers.add("Region", pivotTable.name(), "Region", GC.Spread.Sheets.Slicers.SlicerStyles.dark1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTable);var yearSlicer = sheet.slicers.add("Financial Year", pivotTable.name(), "Financial Year", GC.Spread.Sheets.Slicers.SlicerStyles.dark4(), GC.Spread.Sheets.Slicers.SlicerType.pivotTable);

进行一些外观调整为了使数据透视表更易于阅读，这里进行了一些调整，例如：
折叠计算项这将隐藏汇总的帐户以显示计算项目的值。

文章插图
在组顶部显示小计

转到设计选项卡
单击小计
选择“在组顶部显示所有小计”

文章插图
在每个项目后插入空行

转到设计选项卡
单击空白行
选择“在每个项目后插入空白行”

文章插图
隐藏按钮和字段标题

转到数据透视表分析选项卡
单击按钮和字段标题

文章插图
更改枢轴布局

转到设计选项卡
单击报告布局
选择“以大纲形式显示”

文章插图
上面提到的修改可以通过代码轻松更改。SpreadJS 提供了许多不同的选项来根据应用程序的需要自定义数据透视表的外观和功能。我们可以更改数据透视表选项和布局，如下所示：

let option = pivotTable.options;option = {allowMultipleFiltersPerField: true,insertBlankLineAfterEachItem: true, // Insert Blank Line after Each Item *grandTotalPosition: GC.Spread.Pivot.GrandTotalPosition.row,subtotalsPosition: GC.Spread.Pivot.SubTotalsPosition.top, // Show SubTotals at the Top of the Group *displayFieldsInPageFilterArea: GC.Spread.Pivot.DisplayFields.downThenOver,reportFilterFieldsPerColumn: 1,bandRows:true,bandColumns: true,showRowHeader: true,showColumnHeader: true,showDrill: true, // Collapse Buttons *showMissing: true,showToolTip: true,missingCaption: 'something',fillDownLabels: false,repeatAllItemLabels: false,rowLabelIndent: 4,mergeItem: false,showHeaders: true // Collapse Field Headers *};pivotTable.layoutType(1); // Change the Pivot Layout to Outline Form *

条件和自定义格式接下来，将格式化数据透视表字段。这里可以使用如下所示的数据透视面板设置格式：

转到值 - > 值字段设置
单击数字格式
设置格式。在我们的例子中：$#,##0
确认

文章插图
如果想通过代码执行此操作，请参见下文：

//identify the areavar areaActual= {dataOnly: true,references: [{fieldName: "Actual",items: [fieldName]}]};var style = new GC.Spread.Sheets.Style();style.formatter = "$#,##0";//set style to the areapivotTable.setStyle(areaActual, style);

我们可以对其他字段使用相同的逻辑。使用下表对应的格式：