SpreadJS v17.0 预览版上线发布，包含最新报表插件

SpreadJS v17.0 预览版已经正式上线~~~

此次预览版主要包含了：
（点击链接可跳转详细信息）

新插件

• 报表插件 / ReportSheet
• 甘特图插件（正式版本）/ GanttSheet
  

图表增强

• 新增的瀑布图表
• 折线图中的平滑曲线
• 多区域创建图表
• 新增的棒棒糖迷你图
  

工作表增强

• 增强的粘贴选项
• 扩展自定义表格列样式
• TopRowChanged/LeftColumnChanged 事件增强
• 水平分布对齐
• 保留 Excel 排序状态
  

透视表增强

• 样式中字体设置
• 区域偏移支持
  

集算表增强

• 引用计算字段
• 针对列的触发公式
  

设计器增强

• 集成快捷键
  

（更多 v17.0 包含的功能及增强，请详见后续的发布说明）

点击这里下载 v17.0 预览版（包含报表 Demo）

也可以通过产品公开课了解新版本特性：SpreadJS V17.0版本新特性与功能预览

全新的报表插件
基于 SpreadJS 本身强大的表格能力，在 DataManager 数据关系引擎的助力下，全新的报表插件让报表和数据录入用户有了全新的能力和体验，快速完成报表和数据录入功能的搭建，相对之前，能节省大量的开发成本。



# 各类报表示例


# 报表设计器


# 报表性能
测试环境：

• ThinkPad
• Memory: 32G
• CPU: 13th Gen Intel(R) Core(TM) i7-13700H   2.40 GHz
• Chrome: 119.0.6045.160 (Official Build) (64-bit)
  

计量单位：

• 时长单位：ms / 毫秒
• 内存单位：MB / 兆
  

基于行的报表


分组报表


交叉统计表


# 支持使用 Excel 作为报表模板

正式版本的甘特图插件 / GanttSheet
甘特图插件允许您创建工作分解、生产计划及计划进度等甘特图类型。
是一个快速、数据绑定的 DataTable 视图，具有甘特图行为和电子表格用户界面。使用甘特图有以下的价值：

• 可视化规划：提供项目任务、时间表和依赖关系的清晰可视化表示，有效地规划和管理项目变得更加容易。
• 任务依赖性：允许定义和可视化任务依赖性，了解不同任务的链接方式以及延迟对整个项目时间表的影响。
• 进度跟踪：通过标记已完成的任务并将其与计划时间表进行比较来跟踪每个任务和整个项目的进度。
• 截止日期管理：能够设置和管理项目里程碑和截止日期，确保项目保持正轨并在指定的时间范围内完成。
  

图表部分增强

新增的瀑布图表
将运行总计显示为添加或减去的值，这些值排列为具有正值和负值的列，并通过颜色编码来区分两者。
初始列和最终列通常与水平轴对齐，而中间值通常是浮动列。


折线图的平滑线格式
SpreadJS 中的折线图现在支持平滑线条的格式。


图表的数据来自多个区域
与 Excel 类似，SpreadJS 现在支持使用多选插入图表。
除了选择连续的数据区域之外，还可以按 Ctrl 键选择多个不连续的区域来创建图表。
也可以通过在每个范围之间放置逗号来在代码中指定多个范围：

1. sheet.charts.add("chart1", GC.Spread.Sheets.Charts.ChartType.columnClustered, 0, 100, 400, 300, "Sheet1!$A$1:$C$4,Sheet1!$E$3:$G$3,Sheet2!$A$1:$A$3");

复制代码

新增的棒棒糖迷你图

工作表增强


增强的粘贴选项

SpreadJS 现在支持更多粘贴特殊选项，包括：

• Comments -仅粘贴备注
• Validation - 仅粘贴数据验证
• All using Source theme - 全部使用源主题
• All except borders - 粘贴除边框外的所有单元格内容和格式
• Column Widths - 粘贴复制的一个列或一系列列的宽度
• Formulas and Number Formats - 仅粘贴公式和所有数字格式选项
• Values and Number Formats - 仅粘贴值和所有数字格式选项
  

扩展自定义表格列样式
当表自动扩展时，自定义表列样式现在可以正确复制


TopRowChanged/LeftColumnChanged 事件增强
TopRowChanged 和 LeftColumnChanged 事件现在支持像素滚动。在此更改之前，必须滚动整个行或列才能触发事件，但现在，当启用像素滚动时，它将触发并为滚动中的任何更改提供滚动状态。

水平分布对齐
SpreadJS 现在支持文本的分布式水平对齐。


保留 Excel 排序状态
导入 Excel 文件时，SpreadJS 现在会保留排序条件，以免丢失。

透视表增强

样式中字体设置
将字体选项拆分为不同的属性，以更好地支持 Excel 中的数据透视表和表格字体选项。
通常，单元格上的字体属性可用于设置所有字体选项，新版本还提供了 API 来设置单独的字体选项，如 fontFamily、fontSize、fontWeight 和 fontStyle：

1. // Font
   
2. activeSheet.getCell(2, 0).font('italic normal 12px Mangal');
   
3. activeSheet.getCell(4, 0).font('normal bold 15px Arial Black');
   
4. activeSheet.getCell(6, 0).font('normal normal 18px Georgia');
   
5. 
   
6. // FontFamily
   
7. activeSheet.getCell(2, 1).fontFamily('Mangal');
   
8. activeSheet.getCell(4, 1).fontFamily('Arial Black');
   
9. activeSheet.getCell(6, 1).fontFamily('Georgia');
   
10. 
    
11. // FontSize
    
12. activeSheet.getCell(2, 2).fontSize('12px');
    
13. activeSheet.getCell(4, 2).fontSize('20px');
    
14. activeSheet.getCell(6, 2).fontSize('28px');
    
15. 
    
16. // FontWeight
    
17. activeSheet.getCell(2, 3).fontWeight('bold');
    
18. activeSheet.getCell(4, 3).fontWeight('normal');
    
19. 
    
20. // Italic
    
21. activeSheet.getCell(2, 4).fontStyle('italic');
    
22. activeSheet.getCell(4, 4).fontStyle('normal');

复制代码

区域偏移支持
SpreadJS 现在提供了一个偏移属性来设置数据透视表中特定数据透视区域的样式。
可以使用此偏移量来指定要设置样式的区域的行、列、行计数和列计数：

1. let style = new GC.Spread.Sheets.Style();
   
2.     style.backColor = "rgb(247, 167, 17)";
   
3.     let labelPivotAreaWithOffset = {
   
4.         labelOnly: true,
   
5.         references: [{
   
6.             fieldName: "Salesperson",
   
7.             items: ["Alan"]
   
8.         }],
   
9.         offset: {
   
10.             row: 1,
    
11.             col: 0,
    
12.             rowCount: 3,
    
13.             colCount: 1
    
14.         }
    
15.     };
    
16.     pivotTable.setStyle(labelPivotAreaWithOffset, style);
    
17.     let cornerPivotAreaWithOffset = {
    
18.         type: GC.Spread.Pivot.PivotAreaType.corner,
    
19.         offset: {
    
20.             row: 0,
    
21.             col: 1,
    
22.             rowCount: 1,
    
23.             colCount: 1
    
24.         }
    
25.     };
    
26.     pivotTable.setStyle(cornerPivotAreaWithOffset, style);
    
27.     let topRightPivotAreaWithOffset = {
    
28.         type: GC.Spread.Pivot.PivotAreaType.topRight,
    
29.         offset: {
    
30.             row: 0,
    
31.             col: 0,
    
32.             rowCount: 1,
    
33.             colCount: 4
    
34.         }
    
35.     };
    
36.     pivotTable.setStyle(topRightPivotAreaWithOffset, style);

复制代码

集算表增强


引用计算字段
DataManager 支持从数据源添加字段，新版本还支持具有公式数据类型的虚拟列。
之后可以在集算表的视图中使用这些公式列来显示运行总和或股票价值比率等内容：

1. // Add product table.
   
2. var productTable = dataManager.addTable("productTable", {
   
3.     remote: {
   
4.         read: {
   
5.             url: baseApiUrl + "/Product"
   
6.         }
   
7.     },
   
8.     schema: {
   
9.         columns: {
   
10.             TotalUnits: {
    
11.                dataType: "formula",
    
12.                value: "[@UnitsInStock] + [@UnitsOnOrder]"
    
13.             },
    
14.             StockValue: {
    
15.                 dataType: "formula",
    
16.                 value: "[@UnitPrice] * ([@TotalUnits])"
    
17.             }
    
18.         }
    
19.     }
    
20. });
    
21. 
    
22. // Bind a view to the table sheet
    
23. var myView = productTable.addView("myView", [
    
24.     { value: "Id", caption: "ID", width: 50 },
    
25.     { value: "ProductName", caption: "Name", width: 170 },
    
26.     { value: "UnitPrice", caption: "Unit Price", style: { formatter: "$#,##0.00" }, width: 120 },
    
27.     { value: "UnitsInStock", caption: "Units In Stock", width: 120 },
    
28.     { value: "TotalUnits", caption: "Total Units", width: 120 },
    
29.     { value: "StockValue", caption: "Stock Value", style: { formatter: "$#,##0.00" }, width: 120 },
    
30.     { value: "=SUM([#1:@[UnitPrice]]*([#1:@[UnitsInStock]]+[#1:@[UnitsOnOrder]])", caption: "Running SUM", style: { formatter: "$#,##0.00" }, width: 150 },
    
31.     { value: "=[@StockValue]/SUM([UnitPrice] * ([UnitsInStock] + [UnitsOnOrder]))", caption: "Stock Value Ratio", style: { formatter: "0.00%" }, width: 160 }
    
32. ]);

复制代码

针对列的触发公式
集算表中的触发器公式是根据特定条件或触发器进行计算的公式。
这意味着可以根据特定条件重新计算数据，在输入新值时清理数据，或为列提供默认值。以下是触发公式的一些示例：

1. var table = dataManager.addTable("Table", {
   
2.     schema: {
   
3.         columns: {
   
4.             createdDate: {
   
5.                 dataType: "Date",
   
6.                 trigger: {
   
7.                   when: "onNew",            <<------- apply the formula on created
   
8.                   formula: "=NOW()",        <<------- trigger formula to set current time
   
9.                   // fields: "*"            <<------- when triggered on new, there is no need to specify the affected fields
   
10.                 },
    
11.             },
    
12.             updatedDate: {
    
13.                 dataType: "Date",
    
14.                 trigger: {
    
15.                   when: "onNewAndUpdate",   <<------- apply the formula on created and updated
    
16.                   formula: "=NOW()",        <<------- trigger formula to set current time
    
17.                   fields: "*"               <<------- all fields changed will have the formula applied to them
    
18.                 },
    
19.             },
    
20.             label: {
    
21.                 trigger: {
    
22.                     when: "onNewAndUpdate",      <<------- apply the formula on updated
    
23.                     formula: "=UPPER([@label])"  <<------- use the upper formula on the input text of the label field
    
24.                     fields: "label",             <<------- when the current column value is updated the formula will be applied
    
25.                   },
    
26.             },
    
27.             amount: {
    
28.                 dataType: "number",
    
29.                 trigger: {
    
30.                     when: "onNewAndUpdate",             <<------- apply the formula on updated
    
31.                     formula: "=[@price] * [@quantity]"  <<------- automatically evaluate the amount
    
32.                     fields: "price,quantity",           <<------- the changes of the price and quantity columns will cause the formula to calculate
    
33.                   },
    
34.             },
    
35.             price: { dataType: 'number' },
    
36.             quantity: { dataType: 'number' }
    
37.         },
    
38.     }
    
39. });
    

复制代码

设计器增强

SpreadJS 支持为组合键添加自定义快捷命令。在 Github 的项目中实现了一些 Excel 标准，用户可以从 GitHub 下载：https://github.com/GrapeCity/spreadjs-resources

在 v17 版本中，默认将此项目中的快捷方式添加到设计器组件中，以便在设计器中无需任何额外代码即可使用快捷方式。

新功能的文档什么时候能看到

正式的文档会随着产品发布上线，如果需要报表插件的帮助，可关注产品公开课