1. 选择单元格区域 B4:H9
2. 格式→更多数字格式→自定义
3. 将格式化程序设置为：
=RANGEBLOCKSPARKLINE('Cell Template'!$A$2:$D$7,OBJECT("date",@,"start",IFERROR(SUM(FILTER(Table1[Deposit],Table1[Date]<@))-SUM(FILTER(Table1[Withdrawal],Table1[Date]<@)),0),"withdrawals",IFERROR(SUM(FILTER(Table1[Withdrawal],Table1[Date]=@)),0),"deposits",IFERROR(SUM(FILTER(Table1[Deposit],Table1[Date]=@)),0),"month",MONTH($A$2)))
作为第一个参数，它将单元格范围作为 TemplateSheet 中的模板。
作为第二个参数，它需要一个 OBJECT，该 OBJECT 从位于数据源表的 Table1 中获取数据。
1. [日期]：单元格的当前值
2. [开始]：之前所有存款的总和 - 之前所有提款的总和
3. [提款]：当前提款的总和
4. [存款]：当前存款的总和
5. [end]:[start] 所有当前存款的总和 - 所有当前提款的总和
使用公式是绑定并返回一个范围模板，以便更轻松地使用范围模板。
这是最终输出：
如上图所示，包含日历天数的单元格提供有关开始/结束余额、存款总额和提款总额的信息。
第 3 步：获取每日交易
如果我们想从 DataSource 页面中提取所有交易的列表，我们可以借助 SelectionChanged 事件。当这些事件发生时，SpreadJS 中的工作表将其事件绑定到特定操作。
在我们的示例中，当用户从日历中选择日期时，我们使用了这个方便的 SpreadJS 功能来提取所有交易的列表。
我们为包含所选日期、存款和取款的单元格指定一个名称，因为它更容易进行计算，并且表格将包含有关交易的信息。为 currentMonth 创建名称范围的步骤是：
1. 在公式选项卡上，选择名称管理器
2. 在弹出窗口中，单击新建按钮
3. 设置单元格的名称
在我们的示例中：
name:当前选择；refer to: ='Cash-Flow'!$B$11
name:当前存款；refer to: =FILTER(tblTransactions[Type]:tblTransactions[Withdrawal],(tblTransactions[Date]=CurrentSelection)*(tblTransactions[Deposit]>0))
name:当前取款；refer to: =FILTER(tblTransactions[Type]:tblTransactions[Withdrawal],(tblTransactions[Date]=CurrentSelection)*(tblTransactions[Withdrawal]>0))
设置不同的公式来获取所有存款列表、所有提款列表、结束和开始余额。
1. 起始余额（之前所有存款的总和 - 之前所有取款的总和）：=IFERROR((SUM(FILTER(tblTransactions[Deposit],tblTransactions[Date]<$B$11))-SUM(FILTER(tblTransactions[Withdrawal],tblTransactions [日期]<$B$11))),0)
2. 结束余额（起始余额 当前存款的总和 - 当前提款的总和）：=IFERROR(D13 (SUM(FILTER(tblTransactions[Deposit],tblTransactions[Date]=$B$11))-SUM(FILTER(tblTransactions[Withdrawal] ,tblTransactions[日期]=$B$11))),0)
其中 D13 是起始余额：
1. 存款：=IFERROR(FILTER(currentDeposits,{1,0,1,1,0}),"")
2. 取款：=IFERROR(FILTER(currentWithdrawals,{1,0,1,0,1}),"")
目前手动插入 currentSelection。要根据用户日期选择进行更改，请执行下一步。
在 JavaScript 中创建事件处理函数（见下文）：
// on day selection, update a cell used in filtering the data to show detailed transaction list
cashflowSheet.bind(GC.Spread.Sheets.Events.SelectionChanged, function (sender, args) {
const sheet = args.sheet;
const row = args.newSelections[0].row;
const col = args.newSelections[0].col;
if ((row < 3 || row >= 3 6)
|| (col < 1 || col >= 1 7))
return;
// set the current date cell so that FILTER would update.
sheet.setValue(10, 1, sheet.getValue(row, col));
});
一旦用户单击单元格，上面的代码就会检查单元格是否在日历边界内 (B4:H9)。否则，它会更新 currentSelection，因此，所有用于获取余额和有关交易信息的公式都会在它们指向更改的选定日期时给出正确的结果。
上面的示例是使用 SpreadJS 功能增强你的应用程序并将你的内容从一组简单的数据转换为一个引人入胜、超级有用的类似 Excel 的仪表板的众多方法之一。
这个 JavaScript 组件提供了数百个统计和财务函数和公式，可帮助你在财务应用程序中轻松创建各种元素。
了解更多纯前端表格在线demo示例，请搜索并访问“葡萄城官网”！
