数据透视表功能增强

SpreadJS的 数据透视表插件已经覆盖了现有Excel 中 90% 以上的功能,并且做到了与 Excel 完全兼容,您可以将设计好的透视表在 SpreadJS 与 Excel 之前进行切换,而不用担心数据丢失。

与此同时,SpreadJS 也发布了多个与透视表有关的 API 接口,方便开发者通过代码控制透视表相关的行为和表现。

如下是SpreadJS数据透视表的功能更新列表:

1. 数据源刷新

SpreadJS 的透视表插件(PivotTable)已经具备刷新的能力,当数据源发生变更后,可以通过右键菜单完成透视表的刷新,如下图:

也可以使用调用接口的方式完成刷新,示例代码如下:


 function updateSource()

 @description refresh pivotTable data source
 var spread = new GC.Spread.Sheets.workbook(document.getElementById("ss"));
 var sourceSheet = spread.getSheet(0);
 var sheet = spread.getSheet(1);
 var sourceData = [["Date","Buyer","Type","Amount"],
                  ["01-Jan","Mom","Fuel",74],
                  ["15-Jan","Mom","Food",235],
                  ["17-Jan","Dad","Sports",20],
                  ["21-Jan","Kelly","Books",125]];
 sourceSheet.setArray(0, 0, sourceData);
 sourceSheet.tables.add('sourceData', 0, 0, 5, 4);
 var layout = GC.Spread.Pivot.PivotTableLayoutType.compact;
 var theme = GC.Spread.Pivot.PivotTableThemes.medium2;
 sheet.pivotTables.add("pivotTable_1", 'sourceData', 1, 1, layout, theme, options);
 var pivotTable = sheet.pivotTables.get("pivotTable_1");
 sourceSheet.setValue(1,3,1000);
 pivotTable.updateSource();
 
 updateSource()

                            

2. 详细数据的显示和获取

在数据透视表操作中,常常需要查看某一个汇总数据的详细数据,这对数据的检查非常重要,SpreadJS 在新版本中可以快速的显示详细数据,如下图所示:

同时也可以利用接口获取透视表内某一个汇总数的详细数据信息,接口如下:


function getPivotDetails(pivotItemInfo: GC.Spread.Pivot.IPivotItemInfo[])
   
     @description get PivotTable Details     
     @param {Array} pivotItemInfo The pivot filter details information list
     @param {string} pivotItemInfo.fieldName The name of field
     @param {string} pivotItemInfo.fieldItem The name of field item

getPivotDetails(pivotItemInfo: GC.Spread.Pivot.IPivotItemInfo[])

                            

3. 筛选与排序

筛选和排序也是透视表中常常涉及到的功能,此次SpreadJS新版本中同样对此做出了加强,如下图所示:


(筛选对话框)


(行&列筛选对话框)


(值内置筛选)


(值自定义条件筛选)


(标签筛选(字符串&数字))


(标签筛选(日期))


(标签自定义条件筛选(字符&数字))

以上的 UI 操作均可以通过相对应的 API 在代码中完成。

4. 条件格式化(透视表)

SpreadJS的数据透视表提供了给指定维度设置条件化规则的能力。无论数据透视表布局如何变化,条件化规则都仅应用在指定的维度。

5. 字段的组合和折叠

SpreadJS 的数据透视表提供了组合和折叠功能,这使得查看数据和查找所需数据更加容易。

6. GETPIVOTDATA 函数

SpreadJS 的 GETPIVOTDATA 函数能够查询数据透视表并根据数据透视表结构而不是单元格引用检索特定数据。

7. 值显示方式(Show Value As)

SpreadJS 数据透视表提供了将每个数据和其他数据进行比较的计算方法(值显示方式)。它帮助用户轻松了解到不同部分数据的百分比差异。

8. 视图管理

SpreadJS 数据透视表提供了管理视图的能力,它可以快速恢复在某个时刻保存下来的数据透视表的状态。

公式函数相关

SpreadJS 在持续不断地加入最新的公式与函数,方便最终用户使用这些公式和函数快速的构造各类数据表格及表单。

1. LET 函数增强

LET 函数为计算结果分配名称。 这允许在公式内存储中间表达式,值或定义的名称。 这些名称仅适用于 LET 函数内的范围。 与编程中的变量类似,LET 函数是通过 Excel 内置的公式语法完成的。

要使用 SpreadJS 的 LET 函数,您需要定义名称和与之关联的值,以及使用名称和值所组成的最终计算表达式。 您必须定义至少一个名称/值(一个变量),LET 函数最多支持 126 组这样的变量。

2. TIMEAGO 函数

使用这个函数可以计算起点到当前时间点的时间。

3. WEBSERVICE + FilterJSON 函数

WEBSERVICE 函数请求一个允许跨域资源共享(CORS)的网站,最终得到处理成字符串的返回值。

FILTERJSON 函数将一个有效的 json 字符串转化为一个值、一个对象或者一个可以拆分的对象数组。

您可以同时使用 FILTERJSON 函数以及 WEBSERVICE 函数从服务器上获取 json 对象并在 SpreadJS 中使用。


spread.options.allowDynamicArray = true; // allow dynamicArray
sheet.setFormula(0,0,'=FILTERJSON(WEBSERVICE("https://restcountries.eu/rest/v2/name/China"))'); // WEBSERVICE get the json data.
sheet.setFormula(0,1,'=PROPERTY(A1,"name")'); // "China"

                            

形状相关

1. 支持超链接

SpreadJS 支持给形状添加超链接。


    // 你可以使用以下代码给形状,线条或者组合形状添加超链接。
    var heart = sheet.shapes.add("shape", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 50, 100, 150);
    heart.hyperlink({url: "http://www.google.com", target: 0, tooltip: 'goes to google'});
 
    var lineShape = sheet.shapes.addConnector("line", GC.Spread.Sheets.Shapes.ConnectorType.straight, 290, 20, 420, 170);
    lineShape.hyperlink({url: "http://www.grapecity.com", target: 0, tooltip: 'goes to grapecity'});
 
    var cube = sheet.shapes.add("cube", GC.Spread.Sheets.Shapes.AutoShapeType.cube, 100, 240, 150, 150);
    var can = sheet.shapes.add("can", GC.Spread.Sheets.Shapes.AutoShapeType.can, 400, 240, 150, 150);
    var shapes = [cube, can];
    var groupShape = sheet.shapes.group(shapes);
    groupShape.hyperlink({url: "https://www.grapecity.com/spreadjs/demos/", target: 0});


                            

2. 填充效果

SpreadJS 形状提供渐变填充,图片填充以及纹理填充。

3. 区域快照

SpreadJS 提供区域快照功能,区域快照是在工作表中创建一种视觉引用的功能,区域快照创建一个引用区域的镜像图片。在数据引用区域的内容发生变化的同时,快照图片也会发生改变。

迷你图相关

SpreadJS 的迷你图(Sparkline)作为很重要的数据可视化手段,可以以灵活的方式多角度展示数据规律及特性,此次新版本中也加入了多个迷你图方面的更新。

1. 直方函数迷你图


(离散型)


(连续型)

2. KPI 函数(仪表盘)迷你图

SpreadJS 的 KPI 函数迷你图可以使你更轻松地在财务或者一般行政事务中衡量员工绩效。在下面的工作表中看一下不同员工的关键绩效。

3. IMAGE函数迷你图

使用 SpreadJS 的 IMAGE 函数可以插入一个图像到单元格中,图片数据源必须是 URL 或者 base64 字符串。

图表相关

1. 坐标轴增强

您可以自己定义图表的横纵坐标轴样式。在 SpreadJS 中使 用Javascript 代码自定义属性,例如颜色,线条样式,刻度线和刻度线标签位置,格式以及标题字体大小。

2. 自定义系列

SpreadJS 已支持以下图标元素的自定义:

  • chartType
  • axisGroup
  • backColor
  • backColorTransparency
  • border
  • name
  • xValues
  • yValues
  • errorBars
  • trendlines
  • dataLabels
  • bubbleSizes
  • doughnutHoleSize
  • gapWidth
  • overlap

界面&布局相关

1. 标签页位置

在 SpreadJS 的新版本中,标签页的位置已经可以上、下、左、右四个位置指定摆放。

2. 底部冻结行跟随最后一行

3. Undo/Redo 栈

SpreadJS 支持获取撤销栈以及保留栈,同时您可以在 undoManager 中根据 maxSize 设置撤销栈以及保留栈的长度。


// 您可以通过 getRedoStack 方法获取到 SpreadJS 的保留栈。
 
    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    let redoStack = spread.undoManager().getRedoStack();
 
// 您可以通过 getUndoStack 方法获取到 SpreadJS 的撤销栈。
 
    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    let undoStack = spread.undoManager().getUndoStack();
 
// 您可以通过 maxSize 方法获取或者设置保留栈或者撤销栈的最大长度。
 
    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    let undoManager = spread.undoManager();
    undoManager.maxSize(20); // set max size.
    let maxSize = undoManager.maxSize(); // get max size.

                            

4. 复制粘贴跳过隐藏区域

提供了一个选项来表明当粘贴时是否应该跳过不可见的区域。


// SpreadJS 通过设置工作簿的 pasteSkipInvisibleRange 配置(默认值是false)支持了粘贴时跳过不可见的区域。例如:
workbook.options.pasteSkipInvisibleRange = true;

                            

不可见的例子:

  • 筛选
  • 组合
  • 列宽为0或者行高为0
  • 隐藏

行为相关

1. 撤销后,选中位置更新到上一次操作的位置

选中的位置会因为撤销操作而改变,从而让用户更直观的感受到撤销动作的执行。

历史版本

查看更多关于 SpreadJS 纯前端表格控件的历史版本。