共计 2086 个字符，预计需要花费 6 分钟才能阅读完成。
还在为满屏的公式而“内牛满面”吗？还在为长串的公式解析而发愁吗？还在定位谬误的公式而苦恼吗？下班要写代码，加班还要剖析这又长又臭的公式。你的发际线还好吗？
本葡萄来援救你的发际线啦！带来的不是洗发水，而是公式追踪！这一章，让本葡萄带你用前端电子表格的公式追踪构建公式树，快（解）速（救）分（你）析（的）公（脱）式（发）问题。
背景
在审计、财会、金融等对公式有着大量需要且须要进行剖析的行业中，常常会遇见简单的公式计算，并且须要晓得每一步计算的后果或者援用的数据是否正确。这个时候，满屏的公式，好像在通知你：别想上班！手动将公式一步一步合成，遇到短的公式还好说。遇到长的公式，不仅工作量大，而且容易出错，一不小心弄错了，就错过了末班车工夫。那如何可能疾速地将公式拆解，剖析出其中的每一步计算步骤呢？
这里就能够用到后面说的，利用 SpreadJS 的计算引擎，把剖析交给机器来做，剖析实现之后，能够通过 SpreadJS 本身的形态性能来绘制一个清晰明了的公式树。不仅快且稳，重要的是能够早点上班，他不香吗？
ok，那咱们来看看成果。
实现步骤
想要实现这样的公式树，引入 SpreadJS 是必不可少的步骤，这里就不再赘述
怎么进行引入，次要就讲讲这个公式树以及相应的右键菜单是怎么实现的，疾速入门能够参考下方链接的 demo：
https://demo.grapecity.com.cn…
能够看到上图除了用一个工作簿实例用于失常显示数据和公式之外，在下方也是一个工作簿实例，用于通过形态绘制公式树。公式树的实现其实能够更加灵便，比方弹出一个模态窗，模态窗中加载一个 SpreadJS 实例，或者齐全本人用 DOM 来绘制也都是能够的。因为通过 SpreadJS 的公式追踪，就能够拿到公式相干的援用信息，至于怎么画进去，都是能够的。
咱们能够把上方的工作簿对象定义为 spread，把下方绘制公式树的工作簿对象定义为 spreadForShow，在默认状况下，咱们通过 css 将 spreadForShow 进行暗藏。
咱们通过上面的代码将两个工作簿实例进行初始化。
为了可能更加清晰看到单元格对应的公式，这边也增加了一个公式栏和 Spread 进行绑定，通过以下代码即可。
接下来就是创立对应的右键菜单“钻取”项，下图是实现增加右键菜单项的成果。
对应的，咱们须要注册点击这个项之后的解决命令。该外围也就是作用次要在于，
document.getElementById(“show”).style.visibility = “visible”;
是管制 spreadForShow 这个工作簿的显示。其余代码能够简略了解为创立命令的“模板”。具体注册命令能够参考以下链接：
https://demo.grapecity.com.cn…
注册完对应的命令之后，为了可能让这个项只在由公式的单元格中呈现，能够重写 onOpenMenu。在这个办法外面通过 getFormula 判断点击的单元格是否有公式。有公式，则往右键菜单数组外面增加“钻取”项。
以上就是一些后期的筹备代码，咱们再来看下如何获取公式的援用信息。通过 sheet.getPrecedents(row, col)能够获取单元格中公式具体援用的单元格，返回的是一个对象数组。
为了可能在点击单元格的时候，提前将公式树绘制好，这里用了一个事件监听，当监听到选区扭转的时候，别离调用创立节点以及绘制公式树的办法（前面会进行介绍）。而后将用显示公式树的 spreadForShow 这个工作簿进行暗藏。因为咱们的次要逻辑是通过右键显示公式树，而后切换单元格的时候敞开公式树。
下一步是创立公式援用的节点，为了可能在节点上展现该单元格相干的更多信息，一个的单元格创立一个对应的 node 对象，包含了单元格值，单元格地位以及单元格形容。
再往下就是从原始公式开始逐层往下找了。从原始的公式单元格登程，通过 sheet.getPrecedents(row, col); 找到对应援用单元格之后。以找到的单元格为终点，再次往下找，直至找不到为止。
将公式对应的节点逐个找完之后，就能够开始在 spreadForShow 工作簿上进行绘制了。咱们就别离绘制用于展现数据的矩形以及用于连贯这些形态的连接器形态。上面的代码中 getRectShape 用于创立展现数据的矩形，外面通过代码设置了文本色彩、填充色彩、字体等。getConnectorShape 则是用于创立线条连接器，设置了线宽、色彩等。
最初就是依据后面结构进去的节点，以及预约义好的形态办法进行公式树的绘制。在这个 if-else 中，如果节点是父节点，则通过连接器型装将子节点相连接，如果没有子节点则无需连贯。在 creatNodeTree 办法中，定义的节点信息，通过拼接的形式，将节点信息设置在对应的矩形上。也就是一个一个节点往下绘制，直至绘制实现。
怎么样？看完下面的介绍能够实现对应的性能吗？想不想立即领有如此弱小的数据？没有 demo 的技术文章，就跟方便面没有调料包一样，索然无味。还不赶快下载 demo 尝试一下~
https://gcdn.grapecity.com.cn…
