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

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

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

新插件

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

图表增强

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

工作表增强

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

透视表增强

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

集算表增强

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

设计器增强

• 集成快捷键
  

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

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

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

写BUG的程序员 发表于 2024-1-30 16:27
准备用于生产场景，因为有几个问题您这边回复说是会在v17解决

目前的版本与正式版本在质量上没区别，但始终建议你们经过测试环境的测试后，再更新生产场景

AlexZ 发表于 2024-1-29 18:17
你要用在什么场景？测试还是生产？

准备用于生产场景，因为有几个问题您这边回复说是会在v17解决

写BUG的程序员 发表于 2024-1-29 18:13
目前的 V17 是稳定版本吗

你要用在什么场景？测试还是生产？

目前的 V17 是稳定版本吗

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

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

设计器增强

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

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

集算表增强


引用计算字段
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. });
    

复制代码

透视表增强

样式中字体设置
将字体选项拆分为不同的属性，以更好地支持 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);

复制代码