還在為滿屏的公式而“內牛滿面”嗎？還在為長串的公式解析而發愁嗎？ 還在定位錯誤的公式而苦惱嗎？上班要寫代碼，加班還要分析這又長又臭的公式。你的發際線還好嗎？

本文來拯救你的發際線啦！帶來的不是洗發水，而是公式追蹤！這一章，帶你用SpreadJS的公式追蹤構建公式樹，快（解）速（救）分（你）析（的）公（脫）式（發）問題。

SpreadJS結合40余年專業控件技術和在電子表格應用領域的經驗而推出的純前端表格控件，基于 HTML5，兼容 450 多種 Excel 公式，具備“高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受華為、明源云、遠光軟件等知名企業青睞，被中國軟件行業協會認定為“中國優秀軟件產品”。SpreadJS在界面和功能上與 Excel 高度類似，但又不局限于 Excel，而是為企業信息化系統提供 表格文檔協同編輯、 數據填報 和 類 Excel 報表設計 的應用場景支持，極大降低了企業研發成本和項目交付風險。

獲取SpreadJS最新正式版下載

背景

在審計、財會、金融等對公式有著大量需求且需要進行分析的行業中，經常會遇見復雜的公式計算，并且需要知道每一步計算的結果或者引用的數據是否正確。這個時候，滿屏的公式，仿佛在告訴你：別想下班！手動將公式一步一步分解，遇到短的公式還好說。遇到長的公式，不僅工作量大，而且容易出錯，一不小心弄錯了，就錯過了末班車時間。那如何能夠快速地將公式拆解，分析出其中的每一步計算步驟呢？

 這里就可以用到前面說的，利用SpreadJS的計算引擎，把分析交給機器來做，分析完成之后，可以通過SpreadJS自身的形狀功能來繪制一個清晰明了的公式樹。不僅快且穩，重要的是可以早點下班，他不香嗎？

ok，那我們來看看效果。

實現步驟

想要實現這樣的公式樹，引入SpreadJS是必不可少的步驟，這里就不再贅述。

可以看到上圖除了用一個工作簿實例用于正常顯示數據和公式之外，在下方也是一個工作簿實例，用于通過形狀繪制公式樹。公式樹的實現其實可以更加靈活，比如彈出一個模態窗，模態窗中加載一個SpreadJS實例，或者完全自己用DOM來繪制也都是可以的。因為通過SpreadJS的公式追蹤，就可以拿到公式相關的引用信息，至于怎么畫出來，都是可以的。

我們可以把上方的工作簿對象定義為spread，把下方繪制公式樹的工作簿對象定義為spreadForShow，在默認情況下，我們通過css將spreadForShow進行隱藏。

我們通過下面的代碼將兩個工作簿實例進行初始化。

為了能夠更加清晰看到單元格對應的公式，這邊也添加了一個公式欄和Spread進行綁定，通過以下代碼即可。

接下來就是創建對應的右鍵菜單“鉆取”項，下圖是實現添加右鍵菜單項的效果。

對應的，我們需要注冊點擊這個項之后的處理命令。該核心也就是作用主要在于，

document.getElementById("show").style.visibility = "visible";

是控制spreadForShow這個工作簿的顯示。其余代碼可以簡單理解為創建命令的“模板”。詳細注冊命令可以。

注冊完對應的命令之后，為了能夠讓這個項只在由公式的單元格中出現，可以重寫onOpenMenu。在這個方法里面通過getFormula判斷點擊的單元格是否有公式。有公式，則往右鍵菜單數組里面添加“鉆取”項。

以上就是一些前期的準備代碼，我們再來看下如何獲取公式的引用信息。通過sheet.getPrecedents(row,col)可以獲取單元格中公式具體引用的單元格，返回的是一個對象數組。

為了能夠在點擊單元格的時候，提前將公式樹繪制好，這里用了一個事件監聽，當監聽到選區改變的時候，分別調用創建節點以及繪制公式樹的方法（后面會進行介紹）。然后將用顯示公式樹的spreadForShow這個工作簿進行隱藏。因為我們的主要邏輯是通過右鍵顯示公式樹，然后切換單元格的時候關閉公式樹。

下一步是創建公式引用的節點，為了能夠在節點上展示該單元格相關的更多信息，一個的單元格創建一個對應的node對象，包括了單元格值，單元格位置以及單元格描述。

再往下就是從原始公式開始逐層往下找了。從原始的公式單元格出發，通過sheet.getPrecedents(row,col);找到對應引用單元格之后。以找到的單元格為起點，再次往下找，直至找不到為止。

將公式對應的節點逐一找完之后，就可以開始在spreadForShow工作簿上進行繪制了。我們就分別繪制用于展示數據的矩形以及用于連接這些形狀的連接器形狀。下面的代碼中getRectShape用于創建展示數據的矩形，里面通過代碼設置了文本顏色、填充顏色、字體等。getConnectorShape則是用于創建線條連接器，設置了線寬、顏色等。

最后就是根據前面構造出來的節點，以及預定義好的形狀方法進行公式樹的繪制。在這個if-else中，如果節點是父節點，則通過連接器型裝將子節點相連接，如果沒有子節點則無需連接。在creatNodeTree方法中，定義的節點信息，通過拼接的方式，將節點信息設置在對應的矩形上。也就是一個一個節點往下繪制，直至繪制完成。

怎么樣？看完上面的介紹可以實現對應的功能嗎？想不想立刻擁有如此強大的數據？沒有Demo的技術文章，就跟方便面沒有調料包一樣，索然無味。還不趕快嘗試一下~

本文內容源自