矩形樹圖處理方法和裝置與流程
2023-05-01 20:29:54
本申請涉及數據處理領域，具體而言，涉及一種矩形樹圖處理方法和裝置。
背景技術：
ECharts，縮寫來自Enterprise Charts，商業級數據圖表，它最初是為了滿足公司商業體系裡各種業務系統(如鳳巢、廣告管家等等)的報表需求。Treemap是ECharts最新推出的一種矩形樹圖，它根據各項數據的相對數據值，在容器內生成大小不一的矩形塊，矩形面積表示其數值的大小。矩形樹圖是一種嵌套的層次結構，每一個矩形塊都可以對應著一層新的矩形樹圖。ECharts提供了矩形樹圖數據下鑽的功能(點擊某一矩形塊得到與它相關的更詳細的數據圖表，即從上級數據圖跳轉到對應的次級數據圖)，在數據量爆發式增長的今天，兩層結構的矩形樹圖已經不能滿足用戶的需求，ECharts矩形樹圖支持多層次的矩形樹圖，然而，ECharts沒有實現各個層次數據圖之間的切換功能。
ECharts矩形樹圖現階段還不能支持各層次數據圖之間的切換，也就是說，當進入到某深層數據圖時，ECharts並不能迅速返回該層次之前的各個層級，然而在實際的業務需求中，為了展示各個模塊的數據報表，用戶需要反覆在各個層級的數據圖之間不停切換，很顯然ECharts矩形樹圖現有功能並不能滿足這一需求。用戶只能在數據下鑽之後刷新整個頁面，然後一層一層數據下鑽，這樣的交互十分不便，當數據圖層級不多時勉強可用，但是當數據圖層級比較多時，用戶自己可能都記不清訪問的順序，這種矩形樹圖查看方式不僅效率低而且用戶體驗差。
針對相關技術中矩形樹圖無法實現各個層次數據圖之間切換的問題，目前尚未提出有效的解決方案。
技術實現要素：
本申請的主要目的在於提供一種矩形樹圖處理方法和裝置，以解決相關技術中矩形樹圖無法實現各個層次數據圖之間切換的問題。
為了實現上述目的，根據本申請的一個方面，提供了一種矩形樹圖處理方法。矩形樹圖包括多級數據圖，該方法包括：監聽對導航菜單的觸發事件，其中，導航菜單設置在矩形樹圖上，用於對矩形樹圖的多級數據圖進行導航；以及當監聽到對導航菜 單的觸發事件時，顯示與觸發事件對應的數據圖。
進一步地，在監聽對導航菜單的觸發事件之前，該方法還包括：獲取第N級數據圖對應的訪問路徑，其中，N為大於1的整數，第N級數據圖為當前顯示的數據圖，第N級數據圖對應的訪問路徑為從矩形樹圖的第一級數據圖至第N級數據圖的訪問路徑；以及根據訪問路徑生成第N級數據圖對應的導航菜單。
進一步地，獲取第N級數據圖對應的訪問路徑包括：在矩形樹圖數據下鑽至第N級數據圖時，獲取第N級數據圖的名稱；以及將第N級數據圖的名稱添加至第N-1級數據圖對應的訪問路徑中，得到第N級數據圖對應的訪問路徑。
進一步地，在監聽對導航菜單的觸發事件之前，該方法還包括：遍歷矩形樹圖的多級數據圖，生成矩形樹圖的導航菜單。
進一步地，遍歷矩形樹圖的多級數據圖，生成矩形樹圖的導航菜單包括：遍歷矩形樹圖的多級數據圖，通過多維數組記錄矩形樹圖的各個層級的數據圖的數據和矩形樹圖的各個層級的數據圖對應的數據塊的數據，其中，多維數組的第一維下標用於標識矩形樹圖各個層級，多維數組的第二維下標用於標識矩形樹圖各個層級對應的矩形塊；以及將多維數組各個元素對應的綁定在預設菜單欄的各項中，得到矩形樹圖的導航菜單。
為了實現上述目的，根據本申請的另一方面，提供了一種矩形樹圖處理裝置。矩形樹圖包括多級數據圖，該裝置包括：監聽單元，用於監聽對導航菜單的觸發事件，其中，導航菜單設置在矩形樹圖上，用於對矩形樹圖的多級數據圖進行導航；以及顯示單元，用於在監聽到對導航菜單的觸發事件時，顯示與觸發事件對應的數據圖。
進一步地，該裝置還包括：獲取單元，用於獲取第N級數據圖對應的訪問路徑，其中，N為大於1的整數，第N級數據圖為當前顯示的數據圖，第N級數據圖對應的訪問路徑為從矩形樹圖的第一級數據圖至第N級數據圖的訪問路徑；以及第一生成單元，用於根據訪問路徑生成第N級數據圖對應的導航菜單。
進一步地，獲取單元包括：獲取模塊，用於在矩形樹圖數據下鑽至第N級數據圖時，獲取第N級數據圖的名稱；以及添加模塊，用於將第N級數據圖的名稱添加至第N-1級數據圖對應的訪問路徑中，得到第N級數據圖對應的訪問路徑。
進一步地，該裝置還包括：第二生成單元，用於遍歷矩形樹圖的多級數據圖，生成矩形樹圖的導航菜單。
進一步地，第二生成單元包括：記錄模塊，用於遍歷矩形樹圖的多級數據圖，通過多維數組記錄矩形樹圖的各個層級的數據圖的數據和矩形樹圖的各個層級的數據圖 對應的數據塊的數據，其中，多維數組的第一維下標用於標識矩形樹圖各個層級，多維數組的第二維下標用於標識矩形樹圖各個層級對應的矩形塊；以及綁定模塊，用於將多維數組各個元素對應的綁定在預設菜單欄的各項中，得到矩形樹圖的導航菜單。
本申請通過監聽對導航菜單的觸發事件，其中，導航菜單設置在矩形樹圖上，用於對矩形樹圖的多級數據圖進行導航；以及當監聽到對導航菜單的觸發事件時，顯示與觸發事件對應的數據圖，本申請通過導航菜單對矩形樹圖的導航，從而可以方便實現矩形樹圖中不同層次的數據圖之間的切換，解決了相關技術中矩形樹圖無法實現各個層次數據圖之間切換的問題，進而達到了方便快速地實現矩形樹圖各個層次數據圖之間切換的效果。
附圖說明
構成本申請的一部分的附圖用來提供對本申請的進一步理解，本申請的示意性實施例及其說明用於解釋本申請，並不構成對本申請的不當限定。在附圖中：
圖1是根據本申請第一實施例的矩形樹圖處理方法的流程圖；
圖2是根據本申請實施例的第一級數據圖的示意圖；
圖3是根據本申請實施例的第二級數據圖的示意圖；
圖4是根據本申請第一實施例的導航菜單的示意圖；
圖5是根據本申請第二實施例的導航菜單的示意圖；
圖6是根據本申請第三實施例的導航菜單的示意圖；
圖7是根據本申請第二實施例的矩形樹圖處理方法的流程圖；以及
圖8是根據本申請實施例的矩形樹圖處理裝置的示意圖。
具體實施方式
需要說明的是，在不衝突的情況下，本申請中的實施例及實施例中的特徵可以相互組合。下面將參考附圖並結合實施例來詳細說明本申請。
為了使本技術領域的人員更好地理解本申請方案，下面將結合本申請實施例中的附圖，對本申請實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是本申請一部分的實施例，而不是全部的實施例。基於本申請中的實施例，本領域普通技術人員在沒有做出創造性勞動前提下所獲得的所有其他實施例，都應當屬於本申請保護的範圍。
需要說明的是，本申請的說明書和權利要求書及上述附圖中的術語「第一」、「第二」等是用於區別類似的對象，而不必用於描述特定的順序或先後次序。應該理解這樣使用的數據在適當情況下可以互換，以便這裡描述的本申請的實施例。此外，術語「包括」和「具有」以及他們的任何變形，意圖在於覆蓋不排他的包含，例如，包含了一系列步驟或單元的過程、方法、系統、產品或設備不必限於清楚地列出的那些步驟或單元，而是可包括沒有清楚地列出的或對於這些過程、方法、產品或設備固有的其它步驟或單元。
根據本申請實施例，提供了一種矩形樹圖處理方法，本申請實施例的矩形樹圖包括多級數據圖，圖1是根據本申請第一實施例的矩形樹圖處理方法的流程圖，如圖1所示，該方法包括如下的步驟S102至步驟S104：
步驟S102，監聽對導航菜單的觸發事件，其中，導航菜單設置在矩形樹圖上，用於對矩形樹圖的多級數據圖進行導航。
本申請實施例的矩形樹圖是指通過矩形塊來顯示各個指標參數的數值，其中，矩形塊的面積表示數值的大小，例如，Echarts的Treemap矩形樹圖。矩形樹圖通常包括多級數據圖，通過點擊數據圖中的矩形塊即數據下鑽至下一級數據圖，例如，圖2是根據本申請實施例的第一級數據圖的示意圖，在圖2中，手機品牌包括三星、小米、蘋果、華為、魅族和中興6個品牌，每個品牌所對應的矩形塊表示該品牌的市場份額，其中，矩形塊越大，佔有的市場份額越大，通過點擊第一級數據圖中三星品牌對應的數據塊，矩形樹圖即數據下鑽至三星品牌對應的各個型號手機的市場份額數據圖，如圖3所示，三星品牌包括GalaxyS4、GalaxyS5、GalaxyS6和Galaxy Note四個型號的手機，同樣地，每個型號的手機所對應的矩形塊表示該型號手機的市場份額，其中，矩形塊越大，佔有的市場份額越大。
本申請實施例的導航菜單可以是通過下拉框實現，其中，下拉框的各個選項與矩形樹圖的各個層級的數據圖和/或各個層級的數據圖的數據塊一一對應。
需要說明的是，本申請實施例的導航菜單可以用於對用戶的瀏覽路徑上各個層級的數據圖進行導航，也可以是對用戶當前瀏覽的矩形樹圖的支路上的各個層級的數據圖進行導航，也可以是對整個矩形樹圖中各個層級的數據圖進行導航。
步驟S104，當監聽到對導航菜單的觸發事件時，顯示與觸發事件對應的數據圖。
具體地，在對用戶的瀏覽路徑上各個層級的數據圖進行導航時，例如，用戶當前的瀏覽數據圖的路徑為：手機品牌＝>三星＝>Galaxy S4，則當前的導航菜單包括手機、三星和Galaxy S4三個選項，當用戶點擊導航菜單中的三星選項時，則顯示三星對應的數據圖，當用戶點擊導航菜單中的手機選項時，則顯示手機對應的數據圖。在 對整個矩形樹圖中各個層級的數據圖進行導航時，則導航菜單包括與矩形樹圖中各個層級的數據圖對應的選項。
本申請實施例通過監聽對導航菜單的觸發事件，其中，導航菜單設置在矩形樹圖上，用於對矩形樹圖的多級數據圖進行導航；以及當監聽到對導航菜單的觸發事件時，顯示與觸發事件對應的數據圖，本申請通過導航菜單對矩形樹圖的導航，從而可以方便實現矩形樹圖中不同層次的數據圖之間的切換，解決了相關技術中矩形樹圖無法實現各個層次數據圖之間切換的問題，進而達到了方便快速地實現矩形樹圖各個層次數據圖之間切換的效果。
可選地，在監聽對導航菜單的觸發事件之前，該方法還包括：獲取第N級數據圖對應的訪問路徑，其中，N為大於1的整數，第N級數據圖為當前顯示的數據圖，第N級數據圖對應的訪問路徑為從矩形樹圖的第一級數據圖至第N級數據圖的訪問路徑；以及根據訪問路徑生成第N級數據圖對應的導航菜單。
例如，當前顯示的數據圖為Galaxy S4對應的數據圖，即則用戶的訪問數據圖的路徑為：手機品牌＝>三星＝>Galaxy S4，根據用戶的訪問路徑生成當前顯示的數據圖的導航菜單，如圖4所示，用戶點擊導航菜單上的選項即可導航至對應的數據圖。
可選地，獲取第N級數據圖對應的訪問路徑包括：在矩形樹圖數據下鑽至第N級數據圖時，獲取第N級數據圖的名稱；以及將第N級數據圖的名稱添加至第N-1級數據圖對應的訪問路徑中，得到第N級數據圖對應的訪問路徑。
具體地，可以在用於加載矩形樹圖的容器的上方放置一個超文本標記語言(Hyper Text Markup Language，簡稱為HTML)元素，即標題欄，並在該標題欄中設置下拉框。可以設置一個數組Array[index]，其中，index與矩形樹圖的數據圖層級對應，即第一級數據圖對應於Array[0]，第二級數據圖對應於Array[1]，以此類推。可以在點擊矩形樹圖某矩形塊實現數據下鑽時，記錄當前點擊的矩形塊的名稱並通過JavaScript的方法(例如，append方法)把該矩形塊的名稱添加到下拉框(即導航菜單)選擇項末尾，同時通過JavaScript的方法(例如，push方法)把數據下鑽獲取到的數據放入數組Array[index]末尾，使得各個層級數據圖的數據存放在各自對應的數組元素中。
此外，可以為上述下拉框(即導航菜單)綁定onchange函數，當想要返回某層級數據圖時，選擇下拉框的具體選項，觸發onchange函數，在數組Array[index]中找到對應的數組元素作為參數傳遞到函數中，重載該層級數據圖對應的數據，同時使用JavaScript的slice方法(例如，Array＝Array.slice(0，index+1))獲取數組Array[index]中的子數組，然後刷新下拉框的數據。
可選地，在監聽對導航菜單的觸發事件之前，該方法還包括：遍歷矩形樹圖的多 級數據圖，生成矩形樹圖的導航菜單。
本申請實施例用於對矩形樹圖中各個層級的數據圖進行導航，導航菜單的選項與矩形樹圖中各個層級的數據圖一一對應。例如，可以在加載矩形樹圖的容器上方放置一個HTML元素(即標題欄)，標題欄裡設置一個下拉框，下拉框的各個選項與矩形樹圖中各個層級的數據圖一一對應，下拉框的默認選擇是矩形樹圖的第一級數據圖。
優選地，為了避免導航菜單遮擋數據圖，可以在用戶選擇某個選項後彈出該選項的子選項，如圖5所示的導航菜單，在用戶選擇三星選項時，彈出三星選項的子選項，即GalaxyS4、GalaxyS5、GalaxyS6和Galaxy Note四個子選項，在用戶選擇GalaxyS4選項時，彈出GalaxyS4選項的子選項，即GalaxyS41:3和GalaxyS42兩個子選項。
可選地，遍歷矩形樹圖的多級數據圖，生成矩形樹圖的導航菜單包括：遍歷矩形樹圖的多級數據圖，通過多維數組記錄矩形樹圖的各個層級的數據圖的數據和矩形樹圖的各個層級的數據圖對應的數據塊的數據，其中，多維數組的第一維下標用於標識矩形樹圖各個層級，多維數組的第二維下標用於標識矩形樹圖各個層級對應的矩形塊；以及將多維數組各個元素對應的綁定在預設菜單欄的各項中，得到矩形樹圖的導航菜單。
本申請實施例的預設菜單欄可以是下拉框。本申請實施例可以通過一個多維數組Array[m][n]記錄矩形樹圖的各個層級的數據圖的數據和矩形樹圖的各個層級的數據圖對應的數據塊的數據，下拉框各個選項與多維數組的各個元素一一對應綁定，遍歷矩形樹圖的原始數據，按照下述規則對Array[m][n]賦值：
m(即第一維下標)與矩形樹圖的層級相對應，n(即第二維下標)與每個層級的數據圖的數據塊相對應，例如，Array[0][0]存儲第一級數據圖，Array[1][0]存儲第一級數據圖的第一個矩形塊對應的子數據圖的數據，Array[1][1]存儲第一級數據圖的第二個矩形塊對應的子數據圖的數據，依次類推；Array[2][0]存儲第二級矩形樹圖的第一個矩形塊對應的子數據圖的數據，Array[2][1]存儲第二級矩形樹圖的第二個矩形塊對應的子數據圖的數據，以此類推。
初始化時，讀取Array[0][0]中存儲的數據並生成第一級數據圖。下拉框遍歷Array[m][n]數組存儲的各個數據圖的名稱，默認顯示第一級數據圖，當滑鼠移動到下拉框的某一選項時，將自動顯示出該項對應的下一層級各個子選項(如圖5所示)，依次類推。需要說明的是，上述功能可以通過JavaScript/JQuery完成，矩形樹圖最後一級的數據圖的各個子選項可以不在下拉框中顯示，因為矩形樹圖下鑽至最後一級數據圖之後已經無法再繼續數據下鑽，因此設置最後一級數據圖的各個子選項沒有意義。
由於下拉框的每個選項的數據都綁定到數組Array[m][n]中，在選擇下拉框的某一 選項時，觸發下拉框綁定的onchange函數，在數組Array[m][n]中找到對應的數據作為參數傳遞到函數中，重載該層級數據圖對應的數據，實現矩形樹圖各個層級數據圖的自由切換。
本申請實施例還可以僅進行矩形樹圖的瀏覽支路的導航，例如，用戶當前查看的是三星品牌支路對應的數據圖，此時導航菜單中僅顯示三星品牌支路對應的各個選項，如圖6所示。矩形樹圖的瀏覽支路導航設為具體實現方式包括如下步驟：
步驟S1，在加載矩形樹圖的容器上方放置一個HTML元素(即標題欄)，標題欄裡設置一個下拉框，下拉框的默認選擇是矩形樹圖的第一級數據圖。
步驟S2，通過一個多維數組Array[m][n]記錄矩形樹圖的各個層級的數據圖的數據和矩形樹圖的各個層級的數據圖對應的數據塊的數據，m(即第一維下標)與矩形樹圖的層級相對應，n(即第二維下標)與每個層級的數據圖的數據塊相對應，例如，Array[0][0]存儲第一級數據圖，Array[1][0]存儲第一級數據圖的第一個矩形塊對應的子數據圖的數據，Array[1][1]存儲第一級數據圖的第二個矩形塊對應的子數據圖的數據，依次類推；Array[2][0]存儲第二級矩形樹圖的第一個矩形塊對應的子數據圖的數據，Array[2][1]存儲第二級矩形樹圖的第二個矩形塊對應的子數據圖的數據，以此類推。
步驟S3，設置一個showSelect變量，初始時可以把多維數組Array[m][n]賦值給showSelect變量，下拉框遍歷showSelect數組各個數據圖的名稱並綁定一個Onchange函數，Onchange函數的觸發方式同上。
步驟S4，生成某一數據圖，同時將當前數據圖的子數據圖的數據賦值給showSelect，刷新下拉框數據。
即當用戶點擊下拉框某選項後，顯示該選項對應數據圖，同時，將該數據圖的子數據圖的數據賦值給showSelect變量，並刷新下拉框數據，從而，下拉框僅包含該數據圖支路對應的各個選項。
圖7是根據本申請第二實施例的矩形樹圖處理方法的流程圖。如圖7所示，該方法包括：
步驟S302，載入某層級數據圖。
需要說明的是，初始化時，矩形樹圖通常顯示第一級數據圖，因此，在初始化時載入第一級數據圖。後續用戶選擇某個層級數據圖後，則載入用戶選擇數據圖。
步驟S304，數據圖顯示。
步驟S306，退出/選擇層級？
具體地，在矩形樹圖中設置有矩形樹圖的導航菜單，用戶可以通過該導航菜單選擇層級，當然用戶也可以選擇直接退出矩形樹圖。具體地，當用戶選擇退出時，則退出矩形樹圖的顯示，當用戶選擇某個層級時，則切換至該層級數據圖，即載入該層級數據圖並進行顯示。
從以上的描述中，可以看出，本申請實施例通過導航菜單對矩形樹圖進行導航，不僅體現了矩形樹圖的層次感，能夠幫助用戶快速定位當前數據圖在整個矩形樹圖中的位置，而且提供了返回各個歷史層級的快速入口，實現了歷史各個層級數據圖之間的切換，減少返回到上一級頁面的點擊或操作，方便了用戶操作，大大提高了用戶體驗。
需要說明的是，在附圖的流程圖示出的步驟可以在諸如一組計算機可執行指令的計算機系統中執行，並且，雖然在流程圖中示出了邏輯順序，但是在某些情況下，可以以不同於此處的順序執行所示出或描述的步驟。
根據本申請實施例的另一方面，提供了一種矩形樹圖處理裝置，該矩形樹圖處理裝置可以用於執行本申請實施例的矩形樹圖處理方法，本申請實施例的矩形樹圖處理方法也可以通過本申請實施例的矩形樹圖處理裝置來執行。
圖8是根據本申請實施例的矩形樹圖處理裝置的示意圖，如圖8所示，該裝置包括：監聽單元10和顯示單元20。
監聽單元10，用於監聽對導航菜單的觸發事件，其中，導航菜單設置在矩形樹圖上，用於對矩形樹圖的多級數據圖進行導航。
本申請實施例的導航菜單可以是通過下拉框實現，其中，下拉框的各個選項與矩形樹圖的各個層級的數據圖和/或各個層級的數據圖的數據塊一一對應。
需要說明的是，本申請實施例的導航菜單可以用於對用戶的瀏覽路徑上各個層級的數據圖進行導航，也可以是對用戶當前瀏覽的矩形樹圖的支路上的各個層級的數據圖進行導航，也可以是對整個矩形樹圖中各個層級的數據圖進行導航。
顯示單元20，用於在監聽到對導航菜單的觸發事件時，顯示與觸發事件對應的數據圖。
具體地，在對用戶的瀏覽路徑上各個層級的數據圖進行導航時，例如，用戶當前的瀏覽數據圖的路徑為：手機品牌＝>三星＝>Galaxy S4，則當前的導航菜單包括手機、三星和Galaxy S4三個選項，當用戶點擊導航菜單中的三星選項時，則顯示三星對應的數據圖，當用戶點擊導航菜單中的手機選項時，則顯示手機對應的數據圖。在對整個矩形樹圖中各個層級的數據圖進行導航時，則導航菜單包括與矩形樹圖中各個 層級的數據圖對應的選項。
本申請實施例通過監聽單元10監聽對導航菜單的觸發事件，其中，導航菜單設置在矩形樹圖上，用於對矩形樹圖的多級數據圖進行導航；以及顯示單元20在監聽到對導航菜單的觸發事件時，顯示與觸發事件對應的數據圖，本申請通過導航菜單對矩形樹圖的導航，從而可以方便實現矩形樹圖中不同層次的數據圖之間的切換，解決了相關技術中矩形樹圖無法實現各個層次數據圖之間切換的問題，進而達到了方便快速地實現矩形樹圖各個層次數據圖之間切換的效果。
可選地，該裝置還包括：獲取單元，用於獲取第N級數據圖對應的訪問路徑，其中，N為大於1的整數，第N級數據圖為當前顯示的數據圖，第N級數據圖對應的訪問路徑為從矩形樹圖的第一級數據圖至第N級數據圖的訪問路徑；以及第一生成單元，用於根據訪問路徑生成第N級數據圖對應的導航菜單。
可選地，獲取單元包括：獲取模塊，用於在矩形樹圖數據下鑽至第N級數據圖時，獲取第N級數據圖的名稱；以及添加模塊，用於將第N級數據圖的名稱添加至第N-1級數據圖對應的訪問路徑中，得到第N級數據圖對應的訪問路徑。
可選地，該裝置還包括：第二生成單元，用於遍歷矩形樹圖的多級數據圖，生成矩形樹圖的導航菜單。
可選地，第二生成單元包括：記錄模塊，用於遍歷矩形樹圖的多級數據圖，通過多維數組記錄矩形樹圖的各個層級的數據圖的數據和矩形樹圖的各個層級的數據圖對應的數據塊的數據，其中，多維數組的第一維下標用於標識矩形樹圖各個層級，多維數組的第二維下標用於標識矩形樹圖各個層級對應的矩形塊；以及綁定模塊，用於將多維數組各個元素對應的綁定在預設菜單欄的各項中，得到矩形樹圖的導航菜單。
所述矩形樹圖處理裝置包括處理器和存儲器，上述監聽單元和顯示單元等均作為程序單元存儲在存儲器中，由處理器執行存儲在存儲器中的上述程序單元來實現相應的功能。
處理器中包含內核，由內核去存儲器中調取相應的程序單元。內核可以設置一個或以上，通過調整內核參數來實現矩形樹圖各個層次數據圖之間的切換。
存儲器可能包括計算機可讀介質中的非永久性存儲器，隨機存取存儲器(RAM)和/或非易失性內存等形式，如只讀存儲器(ROM)或快閃記憶體(flash RAM)，存儲器包括至少一個存儲晶片。
本申請還提供了一種電腦程式產品，當在數據處理設備上執行時，適於執行初始化有如下方法步驟的程序代碼：監聽對導航菜單的觸發事件，其中，導航菜單設置 在矩形樹圖上，用於對矩形樹圖的多級數據圖進行導航；以及當監聽到對導航菜單的觸發事件時，顯示與觸發事件對應的數據圖。
上述本申請實施例序號僅僅為了描述，不代表實施例的優劣。
在本申請的上述實施例中，對各個實施例的描述都各有側重，某個實施例中沒有詳述的部分，可以參見其他實施例的相關描述。
在本申請所提供的幾個實施例中，應該理解到，所揭露的技術內容，可通過其它的方式實現。其中，以上所描述的裝置實施例僅僅是示意性的，例如所述單元的劃分，可以為一種邏輯功能劃分，實際實現時可以有另外的劃分方式，例如多個單元或組件可以結合或者可以集成到另一個系統，或一些特徵可以忽略，或不執行。另一點，所顯示或討論的相互之間的耦合或直接耦合或通信連接可以是通過一些接口，單元或模塊的間接耦合或通信連接，可以是電性或其它的形式。
所述作為分離部件說明的單元可以是或者也可以不是物理上分開的，作為單元顯示的部件可以是或者也可以不是物理單元，即可以位於一個地方，或者也可以分布到多個單元上。可以根據實際的需要選擇其中的部分或者全部單元來實現本實施例方案的目的。
另外，在本申請各個實施例中的各功能單元可以集成在一個處理單元中，也可以是各個單元單獨物理存在，也可以兩個或兩個以上單元集成在一個單元中。上述集成的單元既可以採用硬體的形式實現，也可以採用軟體功能單元的形式實現。
所述集成的單元如果以軟體功能單元的形式實現並作為獨立的產品銷售或使用時，可以存儲在一個計算機可讀取存儲介質中。基於這樣的理解，本申請的技術方案本質上或者說對現有技術做出貢獻的部分或者該技術方案的全部或部分可以以軟體產品的形式體現出來，該計算機軟體產品存儲在一個存儲介質中，包括若干指令用以使得一臺計算機設備(可為個人計算機、伺服器或者網絡設備等)執行本申請各個實施例所述方法的全部或部分步驟。而前述的存儲介質包括：U盤、只讀存儲器(ROM，Read-Only Memory)、隨機存取存儲器(RAM，Random Access Memory)、移動硬碟、磁碟或者光碟等各種可以存儲程序代碼的介質。
以上所述僅是本申請的優選實施方式，應當指出，對於本技術領域的普通技術人員來說，在不脫離本申請原理的前提下，還可以做出若干改進和潤飾，這些改進和潤飾也應視為本申請的保護範圍。