是否还在被满屏的公式“淹没”？你还在为一长串的公式分析而烦恼吗？您还在为找错公式而烦恼吗？上班要写代码，加班的时候还要分析这个又长又臭的公式。你的发际线怎么样？这种葡萄来拯救你的发际线！带来的不是洗发水，而是遵循的配方！本章就让这颗葡萄带你使用前端电子表格的公式跟踪搭建公式树，快速（求解）快速（保存）分析（你）分析（）公（关）式（发布）问题。背景在审计、会计、金融等对公式需求量大、需要分析的行业中，经常会遇到复杂的公式计算，需要了解每一步计算的结果或所引用的数据是否正确正确的。这时，屏幕上的公式似乎在告诉你：下班都别想！一步步手动分解公式，遇到短公式也没关系。遇到长公式，不仅工作量大，而且容易出错。一不小心就会错过末班车的时间。那么如何快速拆解公式，分析其中的每一个计算步骤呢？这里可以用我之前说的，利用SpreadJS的计算引擎，把分析交给机器。分析完成后，可以使用SpreadJS的shape函数绘制一棵清晰明了的公式树。不仅快速稳定，更重要的是可以早点下班。他不好吃吗？ok，我们来看看效果吧。实现步骤要实现这样的公式树，引入SpreadJS是必不可少的一步。如何介绍这里就不赘述了。我主要讲一下如何实现这个公式树和对应的右键菜单。快速入门可以参考下面的链接demo：https://demo.grapecity.com.cn...可以看到除了上图中用来显示数据和公式的工作簿实例外，还有下面还有一个workbook实例，用来传Shape绘图公式树。公式树的实现其实可以更灵活一些，比如弹出一个模态窗口，在模态窗口加载一个SpreadJS实例，或者使用DOM自己绘制。因为通过SpreadJS的公式追踪，可以得到公式相关的参考信息。至于怎么画，都是可以的。我们可以将上层工作簿对象定义为spread，将绘制公式树的下层工作簿对象定义为spreadForShow。默认情况下，我们通过css隐藏spreadForShow。我们使用以下代码初始化两个工作簿实例。为了能够更清楚的看到单元格对应的公式，这里还添加了一个公式栏绑定Spread，可以使用如下代码。下一步是创建相应的右键菜单“钻取”项。下图是添加右键菜单项的效果。相应的，我们需要注册点击此项后的处理命令。核心就是主要的功能就是document.getElementById("show").style.visibility="visible";是控制spreadForShow工作簿的显示。其余代码可以简单地理解为创建命令的“模板”。详细的注册命令可以参考以下链接：https://demo.grapecity.com.cn...注册相应的命令后，为了让这一项只出现在有公式的单元格中，可以重写打开菜单。该方法中使用getFormula判断被点击的单元格是否有公式。如果有公式，则在右键菜单数组中添加“钻取”项。以上是一些前期准备的代码，我们来看看如何获??取公式的参考信息。通过sheet.getPrecedents(row,col)可以获取单元格中公式具体引用的单元格，返回一个对象数组。为了在点击单元格时能够提前绘制公式树，这里使用了一个事件监听器。当检测到选择区域发生变化时，分别调用创建节点和绘制公式树的方法（后面会介绍）。然后使用显示公式树的spreadForShow隐藏工作簿。因为我们的主要逻辑是通过右键显示公式树，然后在切换单元格时关闭公式树。下一步是创建公式引用的节点。为了在节点上显示更多关于单元格的信息，为每个单元格创建一个对应的节点对象，包括单元格值、单元格位置和单元格描述。往下走就是从原来的公式开始，一层层往下走。从原来的公式单元格出发，通过sheet.getPrecedents(row,col)找到对应的引用单元格；从找到的单元格开始，再次向下搜索，直到找不到为止。一一找到公式对应的节点后，就可以开始在spreadForShow工作簿上绘图了。让我们绘制代表数据的矩形和连接这些形状的连接器形状。在下面的代码中，getRectShape用于创建一个矩形来显示数据，其中的文字颜色、填充颜色、字体等都是通过代码设置的。getConnectorShape用于创建线连接器，设置线宽、颜色等。最后是根据之前构建的节点和预定义的shape方法绘制公式树。在这个if-else中，如果节点是父节点，则子节点通过connector类型连接，没有子节点则不需要连接。在creatNodeTree方法中，通过拼接的方式将定义的节点信息设置在对应的矩形上。也就是一个一个节点往下画，直到画完为止。这个怎么样？看了上面的介绍，是不是可以实现相应的功能呢？如此强大的数据，你想立刻拥有吗？没有demo的技术文章，就像没有调料包的方便面，没有味道。赶快下载demo试试吧~https://gcdn.grapecity.com.cn...
