還在爲滿屏的公式而“內牛滿面”嗎？還在爲長串的公式解析而發愁嗎？ 還在定位錯誤的公式而苦惱嗎？上班要寫代碼，加班還要分析這又長又臭的公式。你的髮際線還好嗎？
本文來拯救你的髮際線啦！帶來的不是洗髮水，而是公式追蹤！這一章，帶你用SpreadJS的公式追蹤構建公式樹，快（解）速（救）分（你）析（的）公（脫）式（發）問題。
SpreadJS結合40餘年專業控件技術和在電子表格應用領域的經驗而推出的純前端表格控件，基於 HTML5，兼容 450 多種 Excel 公式，具備“高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受華爲、明源雲、遠光軟件等知名企業青睞，被中國軟件行業協會認定爲“中國優秀軟件產品”。SpreadJS在界面和功能上與 Excel 高度類似，但又不侷限於 Excel，而是爲企業信息化系統提供 表格文檔協同編輯、 數據填報 和 類 Excel 報表設計 的應用場景支持，極大降低了企業研發成本和項目交付風險。
背景
在審計、財會、金融等對公式有着大量需求且需要進行分析的行業中，經常會遇見覆雜的公式計算，並且需要知道每一步計算的結果或者引用的數據是否正確。這個時候，滿屏的公式，彷彿在告訴你：別想下班！手動將公式一步一步分解，遇到短的公式還好說。遇到長的公式，不僅工作量大，而且容易出錯，一不小心弄錯了，就錯過了末班車時間。那如何能夠快速地將公式拆解，分析出其中的每一步計算步驟呢？
這裏就可以用到前面說的，利用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的技術文章，就跟方便麪沒有調料包一樣，索然無味。還不趕快下載Demo嘗試一下~
本文內容源自葡萄城