本申請(qǐng)涉及數(shù)據(jù)處理領(lǐng)域，具體而言，涉及一種矩形樹圖處理方法和裝置。

背景技術(shù)：

ECharts，縮寫來自Enterprise Charts，即商業(yè)級(jí)數(shù)據(jù)圖表，它最初是為了滿足公司商業(yè)體系里各種業(yè)務(wù)系統(tǒng)(如鳳巢、廣告管家等等)的報(bào)表需求。Treemap是ECharts最新推出的一種矩形樹圖，它根據(jù)各項(xiàng)數(shù)據(jù)的相對(duì)數(shù)據(jù)值，在容器內(nèi)生成大小不一的矩形塊，矩形面積表示其數(shù)值的大小。矩形樹圖是一種嵌套的層次結(jié)構(gòu)，每一個(gè)矩形塊都可以對(duì)應(yīng)一層新的矩形樹圖。ECharts提供了矩形樹圖數(shù)據(jù)下鉆的功能(點(diǎn)擊某一矩形塊得到與它相關(guān)的更詳細(xì)的數(shù)據(jù)圖表，即從上級(jí)數(shù)據(jù)圖跳轉(zhuǎn)到對(duì)應(yīng)的次級(jí)數(shù)據(jù)圖)，但是ECharts還沒有實(shí)現(xiàn)返回上級(jí)數(shù)據(jù)圖的功能。

ECharts的矩形樹圖現(xiàn)階段還不能支持從次級(jí)數(shù)據(jù)圖返回上級(jí)數(shù)據(jù)圖，甚至在官方提供的實(shí)例中有BUG(點(diǎn)擊輔助工具箱中的還原按鈕回到第一級(jí)數(shù)據(jù)圖之后無法再進(jìn)行數(shù)據(jù)下鉆)。而在實(shí)際的業(yè)務(wù)需求中，為了展示各個(gè)模塊的數(shù)據(jù)報(bào)表，用戶需要反復(fù)在上級(jí)數(shù)據(jù)圖和次級(jí)數(shù)據(jù)圖之間不停切換，很顯然ECharts現(xiàn)有功能并不能滿足這一需求。現(xiàn)有技術(shù)中，為了實(shí)現(xiàn)這樣的需求，用戶只能在數(shù)據(jù)下鉆之后刷新整個(gè)頁面，才能去查看另外的矩形塊對(duì)應(yīng)的次級(jí)數(shù)據(jù)圖，這樣的交互十分不便，用戶體驗(yàn)差。

針對(duì)相關(guān)技術(shù)中矩形樹圖數(shù)據(jù)下鉆后返回至上級(jí)數(shù)據(jù)圖時(shí)操作較為不便的問題，目前尚未提出有效的解決方案。

技術(shù)實(shí)現(xiàn)要素：

本申請(qǐng)的主要目的在于提供一種矩形樹圖處理方法和裝置，以解決相關(guān)技術(shù)中矩形樹圖數(shù)據(jù)下鉆后返回至上級(jí)數(shù)據(jù)圖時(shí)操作較為不便的問題。

為了實(shí)現(xiàn)上述目的，根據(jù)本申請(qǐng)的一個(gè)方面，提供了一種矩形樹圖處理方法。矩形樹圖包括多級(jí)數(shù)據(jù)圖，該方法包括：當(dāng)矩形樹圖數(shù)據(jù)下鉆至第N級(jí)數(shù)據(jù)圖時(shí)，在矩形樹圖上顯示回退標(biāo)識(shí)，其中，N為大于1的整數(shù)；監(jiān)聽對(duì)回退標(biāo)識(shí)的觸發(fā)事件；以及當(dāng)監(jiān)聽到回退標(biāo)識(shí)的觸發(fā)事件時(shí)，顯示第N級(jí)數(shù)據(jù)圖的上級(jí)數(shù)據(jù)圖。

進(jìn)一步地，回退標(biāo)識(shí)用于指示回退至第N級(jí)數(shù)據(jù)圖的上一級(jí)數(shù)據(jù)圖，當(dāng)監(jiān)聽到回退標(biāo)識(shí)的觸發(fā)事件時(shí)，顯示矩形樹圖的上級(jí)數(shù)據(jù)圖包括：顯示第N-1級(jí)數(shù)據(jù)圖。

進(jìn)一步地，N為大于2的整數(shù)，當(dāng)監(jiān)聽到回退標(biāo)識(shí)的觸發(fā)事件時(shí)，顯示第N級(jí)數(shù)據(jù)圖的上級(jí)數(shù)據(jù)圖包括：判斷回退標(biāo)識(shí)所對(duì)應(yīng)的數(shù)據(jù)圖層級(jí)，其中，回退標(biāo)識(shí)所對(duì)應(yīng)的數(shù)據(jù)圖層級(jí)小于N；以及顯示回退標(biāo)識(shí)所對(duì)應(yīng)的數(shù)據(jù)圖層級(jí)對(duì)應(yīng)的數(shù)據(jù)圖。

進(jìn)一步地，當(dāng)矩形樹圖數(shù)據(jù)下鉆至第N級(jí)數(shù)據(jù)圖時(shí)，在矩形樹圖上顯示回退標(biāo)識(shí)包括：獲取第N級(jí)數(shù)據(jù)圖對(duì)應(yīng)的訪問路徑，其中，第N級(jí)數(shù)據(jù)圖對(duì)應(yīng)的訪問路徑為從矩形樹圖的第一級(jí)數(shù)據(jù)圖至第N級(jí)數(shù)據(jù)圖的訪問路徑；根據(jù)訪問路徑生成第N級(jí)數(shù)據(jù)圖對(duì)應(yīng)的回退標(biāo)識(shí)；以及在矩形樹圖上顯示回退標(biāo)識(shí)。

進(jìn)一步地，回退標(biāo)識(shí)為回退按鈕，當(dāng)矩形樹圖數(shù)據(jù)下鉆至第N級(jí)數(shù)據(jù)圖時(shí)，在矩形樹圖上顯示回退標(biāo)識(shí)包括：在矩形樹圖上顯示標(biāo)題欄；以及在標(biāo)題欄中顯示回退按鈕。

進(jìn)一步地，當(dāng)監(jiān)聽到回退標(biāo)識(shí)的觸發(fā)事件時(shí)，顯示第N級(jí)數(shù)據(jù)圖的上級(jí)數(shù)據(jù)圖之后，該方法還包括：判斷第N級(jí)數(shù)據(jù)圖的上級(jí)數(shù)據(jù)圖是否為第一級(jí)數(shù)據(jù)圖；以及在判斷出第N級(jí)數(shù)據(jù)圖的上級(jí)數(shù)據(jù)圖為第一級(jí)數(shù)據(jù)圖時(shí)，隱藏標(biāo)題欄。

為了實(shí)現(xiàn)上述目的，根據(jù)本申請(qǐng)的另一方面，提供了一種矩形樹圖處理裝置。矩形樹圖包括多級(jí)數(shù)據(jù)圖，該裝置包括：第一顯示單元，用于在矩形樹圖數(shù)據(jù)下鉆至第N級(jí)數(shù)據(jù)圖時(shí)，在矩形樹圖上顯示回退標(biāo)識(shí)，其中，N為大于1的整數(shù)；監(jiān)聽單元，用于監(jiān)聽對(duì)回退標(biāo)識(shí)的觸發(fā)事件；以及第二顯示單元，用于在監(jiān)聽到回退標(biāo)識(shí)的觸發(fā)事件時(shí)，顯示第N級(jí)數(shù)據(jù)圖的上級(jí)數(shù)據(jù)圖。

進(jìn)一步地，回退標(biāo)識(shí)用于指示回退至第N級(jí)數(shù)據(jù)圖的上一級(jí)數(shù)據(jù)圖，第二顯示單元包括：第一顯示模塊，用于顯示第N-1級(jí)數(shù)據(jù)圖。

進(jìn)一步地，N為大于2的整數(shù)，第二顯示單元包括：判斷模塊，用于判斷回退標(biāo)識(shí)所對(duì)應(yīng)的數(shù)據(jù)圖層級(jí)，其中，回退標(biāo)識(shí)所對(duì)應(yīng)的數(shù)據(jù)圖層級(jí)小于N；以及第二顯示模塊，用于顯示回退標(biāo)識(shí)所對(duì)應(yīng)的數(shù)據(jù)圖層級(jí)對(duì)應(yīng)的數(shù)據(jù)圖。

進(jìn)一步地，第一顯示單元包括：獲取模塊，用于獲取第N級(jí)數(shù)據(jù)圖對(duì)應(yīng)的訪問路徑，其中，第N級(jí)數(shù)據(jù)圖對(duì)應(yīng)的訪問路徑為從矩形樹圖的第一級(jí)數(shù)據(jù)圖至第N級(jí)數(shù)據(jù)圖的訪問路徑；生成模塊，用于根據(jù)訪問路徑生成第N級(jí)數(shù)據(jù)圖對(duì)應(yīng)的回退標(biāo)識(shí)；以及第三顯示模塊，用于在矩形樹圖上顯示回退標(biāo)識(shí)。

本申請(qǐng)通過當(dāng)矩形樹圖數(shù)據(jù)下鉆至第N級(jí)數(shù)據(jù)圖時(shí)，在矩形樹圖上顯示回退標(biāo)識(shí)，其中，N為大于1的整數(shù)；監(jiān)聽對(duì)回退標(biāo)識(shí)的觸發(fā)事件；以及當(dāng)監(jiān)聽到回退標(biāo)識(shí)的觸發(fā)事件時(shí)，顯示第N級(jí)數(shù)據(jù)圖的上級(jí)數(shù)據(jù)圖，解決了相關(guān)技術(shù)中矩形樹圖數(shù)據(jù)下鉆后返回至上級(jí)數(shù)據(jù)圖時(shí)操作較為不便的問題，進(jìn)而達(dá)到了在矩形樹圖數(shù)據(jù)下鉆后方便快捷地返回至上級(jí)數(shù)據(jù)圖的效果。

附圖說明

構(gòu)成本申請(qǐng)的一部分的附圖用來提供對(duì)本申請(qǐng)的進(jìn)一步理解，本申請(qǐng)的示意性實(shí)施例及其說明用于解釋本申請(qǐng)，并不構(gòu)成對(duì)本申請(qǐng)的不當(dāng)限定。在附圖中：

圖1是根據(jù)本申請(qǐng)第一實(shí)施例的矩形樹圖處理方法的流程圖；

圖2是根據(jù)本申請(qǐng)實(shí)施例第一級(jí)數(shù)據(jù)圖的示意圖；

圖3是根據(jù)本申請(qǐng)實(shí)施例的第二級(jí)數(shù)據(jù)圖的示意圖；

圖4是根據(jù)本申請(qǐng)實(shí)施例的回退標(biāo)識(shí)的示意圖；

圖5是根據(jù)本申請(qǐng)第二實(shí)施例的矩形樹圖處理方法的流程圖；以及

圖6是根據(jù)本申請(qǐng)實(shí)施例的矩形樹圖處理裝置的示意圖。

具體實(shí)施方式

需要說明的是，在不沖突的情況下，本申請(qǐng)中的實(shí)施例及實(shí)施例中的特征可以相互組合。下面將參考附圖并結(jié)合實(shí)施例來詳細(xì)說明本申請(qǐng)。

為了使本技術(shù)領(lǐng)域的人員更好地理解本申請(qǐng)方案，下面將結(jié)合本申請(qǐng)實(shí)施例中的附圖，對(duì)本申請(qǐng)實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例僅僅是本申請(qǐng)一部分的實(shí)施例，而不是全部的實(shí)施例?；诒旧暾?qǐng)中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都應(yīng)當(dāng)屬于本申請(qǐng)保護(hù)的范圍。

需要說明的是，本申請(qǐng)的說明書和權(quán)利要求書及上述附圖中的術(shù)語“第一”、“第二”等是用于區(qū)別類似的對(duì)象，而不必用于描述特定的順序或先后次序。應(yīng)該理解這樣使用的數(shù)據(jù)在適當(dāng)情況下可以互換，以便這里描述的本申請(qǐng)的實(shí)施例。此外，術(shù)語“包括”和“具有”以及他們的任何變形，意圖在于覆蓋不排他的包含，例如，包含了一系列步驟或單元的過程、方法、系統(tǒng)、產(chǎn)品或設(shè)備不必限于清楚地列出的那些步驟或單元，而是可包括沒有清楚地列出的或?qū)τ谶@些過程、方法、產(chǎn)品或設(shè)備固有的其它步驟或單元。

根據(jù)本申請(qǐng)實(shí)施例，提供了一種矩形樹圖處理方法。本申請(qǐng)實(shí)施例的矩形樹圖包括多級(jí)數(shù)據(jù)圖，圖1是根據(jù)本申請(qǐng)第一實(shí)施例的矩形樹圖處理方法的流程圖，如圖1所示，該方法包括如下的步驟S102至步驟S106：

步驟S102，當(dāng)矩形樹圖數(shù)據(jù)下鉆至第N級(jí)數(shù)據(jù)圖時(shí)，在矩形樹圖上顯示回退標(biāo)識(shí)，其中，N為大于1的整數(shù)。

矩形樹圖數(shù)據(jù)下鉆是指由某一數(shù)據(jù)圖進(jìn)入顯示下級(jí)數(shù)據(jù)圖，例如，如圖2所示，手機(jī)品牌包括三星、小米、蘋果、華為、魅族和中興6個(gè)品牌，每個(gè)品牌所對(duì)應(yīng)的矩形塊表示該品牌的市場(chǎng)份額，其中，矩形塊越大，占有的市場(chǎng)份額越大，通過點(diǎn)擊第一級(jí)數(shù)據(jù)圖中三星品牌對(duì)應(yīng)的數(shù)據(jù)塊，矩形樹圖即數(shù)據(jù)下鉆至三星品牌對(duì)應(yīng)的各個(gè)型號(hào)手機(jī)的市場(chǎng)份額數(shù)據(jù)圖，如圖3所示，三星品牌包括GalaxyS4、GalaxyS5、GalaxyS6和Galaxy Note四個(gè)型號(hào)的手機(jī)，同樣地，每個(gè)型號(hào)的手機(jī)所對(duì)應(yīng)的矩形塊表示該型號(hào)手機(jī)的市場(chǎng)份額，其中，矩形塊越大，占有的市場(chǎng)份額越大。

具體地，當(dāng)用戶點(diǎn)擊矩形樹圖某矩形塊實(shí)現(xiàn)數(shù)據(jù)下鉆時(shí)，在生成對(duì)應(yīng)下級(jí)數(shù)據(jù)圖的同時(shí)在對(duì)應(yīng)下級(jí)數(shù)據(jù)圖上顯示回退標(biāo)識(shí)，可選地，該回退標(biāo)識(shí)可以是按鈕、標(biāo)簽或是下拉框等，對(duì)該回退標(biāo)識(shí)預(yù)先注冊(cè)了用于數(shù)據(jù)圖返回的方法或函數(shù)。

需要說明的是，本申請(qǐng)實(shí)施例的矩形樹圖可以是Echarts的Treemap矩形樹圖。

優(yōu)選地，為了不影響矩形樹圖的顯示效果，回退標(biāo)識(shí)為回退按鈕，當(dāng)矩形樹圖數(shù)據(jù)下鉆至第N級(jí)數(shù)據(jù)圖時(shí)，在矩形樹圖上顯示回退標(biāo)識(shí)包括：在矩形樹圖上顯示標(biāo)題欄；以及在標(biāo)題欄中顯示回退按鈕。

具體地，可以在用于加載矩形樹圖的容器的上方放置一個(gè)超文本標(biāo)記語言(Hyper Text Markup Language，簡(jiǎn)稱為HTML)元素，即標(biāo)題欄，并在該標(biāo)題欄中設(shè)置一個(gè)回退按鈕(button)，并將標(biāo)題欄的CSS display屬性置為none，讓該標(biāo)題欄在初始化狀態(tài)下不可見。當(dāng)用戶點(diǎn)擊矩形樹圖某矩形塊實(shí)現(xiàn)數(shù)據(jù)下鉆時(shí)，在生成對(duì)應(yīng)下級(jí)數(shù)據(jù)圖的同時(shí)調(diào)用JavaScript或JQuery方法將上述標(biāo)題欄的CSS display屬性置為block，令其可見。

本申請(qǐng)實(shí)施例通過將回退按鈕設(shè)置在矩形樹圖上方的標(biāo)題欄中，從而可以避免回退按鈕對(duì)矩形樹圖的數(shù)據(jù)圖的遮擋，而且也便于用戶操作。

優(yōu)選地，為了提高矩形樹圖的顯示效果，當(dāng)監(jiān)聽到回退標(biāo)識(shí)的觸發(fā)事件時(shí)，顯示第N級(jí)數(shù)據(jù)圖的上級(jí)數(shù)據(jù)圖之后，該方法還包括：判斷第N級(jí)數(shù)據(jù)圖的上級(jí)數(shù)據(jù)圖是否為第一級(jí)數(shù)據(jù)圖；以及在判斷出第N級(jí)數(shù)據(jù)圖的上級(jí)數(shù)據(jù)圖為第一級(jí)數(shù)據(jù)圖時(shí)，隱藏標(biāo)題欄。

由于本申請(qǐng)實(shí)施例的矩形樹圖能夠多次數(shù)據(jù)下鉆，因此，第N級(jí)數(shù)據(jù)圖的上級(jí)數(shù)據(jù)圖不一定為第一級(jí)數(shù)據(jù)圖。本申請(qǐng)實(shí)施例在監(jiān)聽到回退標(biāo)識(shí)的觸發(fā)事件之后，判斷當(dāng)前需要顯示的數(shù)據(jù)圖是否為第一級(jí)數(shù)據(jù)圖，如果當(dāng)前顯示的數(shù)據(jù)圖為第一級(jí)數(shù)據(jù)圖，則隱藏上述標(biāo)題欄。具體地，可以在回退標(biāo)識(shí)上綁定一個(gè)click()函數(shù)，當(dāng)點(diǎn)擊回退標(biāo)識(shí)時(shí)，判斷第N級(jí)數(shù)據(jù)圖的上級(jí)數(shù)據(jù)圖是否為第一級(jí)數(shù)據(jù)圖，在判斷出第N級(jí)數(shù)據(jù)圖的上級(jí)數(shù)據(jù)圖為第一級(jí)數(shù)據(jù)圖時(shí)，將標(biāo)題欄的CSS display屬性置為none，令其不 可見。

由于第一級(jí)數(shù)據(jù)圖不存在需要返回至上級(jí)數(shù)據(jù)圖的情況，因此，在第一級(jí)數(shù)據(jù)圖中可以隱藏標(biāo)題欄，以提高矩形樹圖的顯示效果。

步驟S104，監(jiān)聽對(duì)回退標(biāo)識(shí)的觸發(fā)事件。

步驟S106，當(dāng)監(jiān)聽到回退標(biāo)識(shí)的觸發(fā)事件時(shí)，顯示第N級(jí)數(shù)據(jù)圖的上級(jí)數(shù)據(jù)圖。

需要說明的是，本申請(qǐng)實(shí)施例可以在監(jiān)聽到回退標(biāo)識(shí)的觸發(fā)事件時(shí)，可以返回至第N級(jí)數(shù)據(jù)圖之前的任意一級(jí)數(shù)據(jù)圖，例如，可以返回至第N-1級(jí)數(shù)據(jù)圖，也可以是返回至第N-2級(jí)數(shù)據(jù)圖，其中，N為大于2的整數(shù)。

本申請(qǐng)實(shí)施例通過當(dāng)矩形樹圖數(shù)據(jù)下鉆至第N級(jí)數(shù)據(jù)圖時(shí)，在矩形樹圖上顯示回退標(biāo)識(shí)，其中，N為大于1的整數(shù)；監(jiān)聽對(duì)回退標(biāo)識(shí)的觸發(fā)事件；以及當(dāng)監(jiān)聽到回退標(biāo)識(shí)的觸發(fā)事件時(shí)，顯示第N級(jí)數(shù)據(jù)圖的上級(jí)數(shù)據(jù)圖，本申請(qǐng)實(shí)施例在矩形樹圖數(shù)據(jù)下鉆后通過回退標(biāo)識(shí)即可以實(shí)現(xiàn)返回至上級(jí)數(shù)據(jù)圖，相比于現(xiàn)有技術(shù)中通過刷新整個(gè)矩形樹圖的頁面僅能返回至第一級(jí)數(shù)據(jù)圖，操作更為簡(jiǎn)便、靈活，解決了相關(guān)技術(shù)中矩形樹圖數(shù)據(jù)下鉆后返回至上級(jí)數(shù)據(jù)圖時(shí)操作較為不便的問題，進(jìn)而達(dá)到了在矩形樹圖數(shù)據(jù)下鉆后方便地返回至上級(jí)數(shù)據(jù)圖的效果。

可選地，回退標(biāo)識(shí)用于指示回退至第N級(jí)數(shù)據(jù)圖的上一級(jí)數(shù)據(jù)圖，當(dāng)監(jiān)聽到回退標(biāo)識(shí)的觸發(fā)事件時(shí)，顯示矩形樹圖的上級(jí)數(shù)據(jù)圖包括：顯示第N-1級(jí)數(shù)據(jù)圖。

本申請(qǐng)實(shí)施例的回退標(biāo)識(shí)僅用于回退至當(dāng)前顯示的數(shù)據(jù)圖的上一級(jí)數(shù)據(jù)圖，其中，回退標(biāo)識(shí)可以是回退按鈕，如圖4所示，以下以回退標(biāo)識(shí)為回退按鈕為例對(duì)本申請(qǐng)實(shí)施例進(jìn)行說明，具體地，可以在回退按鈕上綁定一個(gè)click()函數(shù)，當(dāng)點(diǎn)擊回退按鈕時(shí)，重載當(dāng)前數(shù)據(jù)圖的上一級(jí)數(shù)據(jù)圖數(shù)據(jù)，并在矩形樹圖的容器內(nèi)生成上一級(jí)數(shù)據(jù)圖，例如，圖4中，點(diǎn)擊菜單欄上的回退按鈕，則矩形樹圖返回至圖2所示的數(shù)據(jù)圖。

優(yōu)選地，為了提高矩形樹圖下鉆后返回至上級(jí)數(shù)據(jù)圖的靈活性，N為大于2的整數(shù)，當(dāng)監(jiān)聽到回退標(biāo)識(shí)的觸發(fā)事件時(shí)，顯示第N級(jí)數(shù)據(jù)圖的上級(jí)數(shù)據(jù)圖包括：判斷回退標(biāo)識(shí)所對(duì)應(yīng)的數(shù)據(jù)圖層級(jí)，其中，回退標(biāo)識(shí)所對(duì)應(yīng)的數(shù)據(jù)圖層級(jí)小于N；以及顯示回退標(biāo)識(shí)所對(duì)應(yīng)的數(shù)據(jù)圖層級(jí)對(duì)應(yīng)的數(shù)據(jù)圖。

可選地，本申請(qǐng)實(shí)施例的回退標(biāo)識(shí)可以是下拉框，其中，下拉框的選項(xiàng)與當(dāng)前顯示的數(shù)據(jù)圖的上級(jí)數(shù)據(jù)圖一一對(duì)應(yīng)，例如，當(dāng)前顯示的數(shù)據(jù)圖為第四級(jí)數(shù)據(jù)圖，則下拉框中第一個(gè)選項(xiàng)對(duì)應(yīng)于第一級(jí)數(shù)據(jù)圖，第二個(gè)選項(xiàng)對(duì)應(yīng)于第二級(jí)數(shù)據(jù)圖，第三個(gè)選項(xiàng)對(duì)應(yīng)于第三級(jí)數(shù)據(jù)圖，通過點(diǎn)擊下拉框的選項(xiàng)返回至對(duì)應(yīng)的數(shù)據(jù)圖，例如，當(dāng)用戶點(diǎn)擊下拉框的第二個(gè)選項(xiàng)時(shí)，矩形樹圖返回至第二級(jí)數(shù)據(jù)圖，當(dāng)用戶點(diǎn)擊下拉框的第 三個(gè)選項(xiàng)時(shí)，矩形樹圖返回至第三級(jí)數(shù)據(jù)圖，從而使得矩形樹圖返回至上級(jí)數(shù)據(jù)圖更為靈活。

具體地，本申請(qǐng)實(shí)施例在監(jiān)聽到回退標(biāo)識(shí)的觸發(fā)事件時(shí)，判斷該回退標(biāo)識(shí)的觸發(fā)事件對(duì)應(yīng)的數(shù)據(jù)圖層級(jí)，例如，用戶點(diǎn)擊下拉框的第二選項(xiàng)，則該回退標(biāo)識(shí)的觸發(fā)事件對(duì)應(yīng)的數(shù)據(jù)圖層級(jí)為2，此時(shí)，顯示矩形樹圖的第二級(jí)數(shù)據(jù)圖。

可選地，當(dāng)矩形樹圖數(shù)據(jù)下鉆至第N級(jí)數(shù)據(jù)圖時(shí)，在矩形樹圖上顯示回退標(biāo)識(shí)包括：獲取第N級(jí)數(shù)據(jù)圖對(duì)應(yīng)的訪問路徑，其中，第N級(jí)數(shù)據(jù)圖對(duì)應(yīng)的訪問路徑為從矩形樹圖的第一級(jí)數(shù)據(jù)圖至第N級(jí)數(shù)據(jù)圖的訪問路徑；根據(jù)訪問路徑生成第N級(jí)數(shù)據(jù)圖對(duì)應(yīng)的回退標(biāo)識(shí)；以及在矩形樹圖上顯示回退標(biāo)識(shí)。

例如，可以設(shè)置一個(gè)數(shù)組Array[index]，其中，index與矩形樹圖的數(shù)據(jù)圖層級(jí)對(duì)應(yīng)，即第一級(jí)數(shù)據(jù)圖對(duì)應(yīng)于Array[0]，第二級(jí)數(shù)據(jù)圖對(duì)應(yīng)于Array[1]，以此類推。在點(diǎn)擊矩形樹圖某矩形塊實(shí)現(xiàn)數(shù)據(jù)下鉆時(shí)，記錄當(dāng)前點(diǎn)擊的矩形塊的名稱并通過JavaScript的方法(例如，append方法)把該矩形塊的名稱添加到下拉框選擇項(xiàng)末尾，同時(shí)通過JavaScript的方法(例如，push方法)把數(shù)據(jù)下鉆獲取到的數(shù)據(jù)放入數(shù)組Array[index]末尾，使得各個(gè)層級(jí)數(shù)據(jù)圖的數(shù)據(jù)存放在各自對(duì)應(yīng)的數(shù)組元素中。

此外，可以為上述下拉框綁定onchange函數(shù)，當(dāng)想要返回某層級(jí)數(shù)據(jù)圖時(shí)，選擇下拉框的具體選項(xiàng)，觸發(fā)onchange函數(shù)，在數(shù)組Array[index]中找到對(duì)應(yīng)的數(shù)組元素作為參數(shù)傳遞到函數(shù)中，重載該層級(jí)數(shù)據(jù)圖對(duì)應(yīng)的數(shù)據(jù)，同時(shí)使用JavaScript的slice方法(例如，Array＝Array.slice(0，index+1))獲取數(shù)組Array[index]中的子數(shù)組，然后刷新下拉框的數(shù)據(jù)。

本申請(qǐng)實(shí)施例可以通過數(shù)組Array[index]記錄用戶的訪問路徑，并根據(jù)用戶的訪問路徑刷新矩形樹圖的下拉框的選項(xiàng)(即回退標(biāo)識(shí))。

以下以矩形樹圖包含兩級(jí)數(shù)據(jù)圖為例對(duì)本申請(qǐng)實(shí)施例進(jìn)行說明，圖5是根據(jù)本申請(qǐng)第二實(shí)施例的矩形樹圖處理方法的流程圖，如圖5所示，該方法包括如下步驟：

步驟S202，載入第一級(jí)數(shù)據(jù)圖。

具體地，以矩形樹圖為ECharts的Treemap為例，ECharts讀取矩形樹圖的數(shù)據(jù)并在加載容器內(nèi)生成第一級(jí)數(shù)據(jù)圖。

步驟S204，第一級(jí)數(shù)據(jù)圖顯示。

步驟S206，退出/點(diǎn)擊模塊？

判斷用戶的操作是點(diǎn)擊退出還是點(diǎn)擊模塊(即數(shù)據(jù)圖的矩形塊)，如果用戶點(diǎn)擊退 出，則執(zhí)行步驟S214，退出矩形樹圖的顯示，如果用戶點(diǎn)擊模塊，則執(zhí)行步驟S208，例如，如圖2所示，用戶點(diǎn)擊當(dāng)前顯示的數(shù)據(jù)圖的三星品牌對(duì)應(yīng)的矩形框，則該矩形樹圖數(shù)據(jù)下鉆。

步驟S208，載入第二級(jí)數(shù)據(jù)圖。

載入方式同上述步驟S202，在此不再贅述。

步驟S210，第二級(jí)數(shù)據(jù)圖顯示。

步驟S212，退出/返回上級(jí)？

在第二級(jí)數(shù)據(jù)圖顯示過程中，用戶可以選擇是退出矩形樹圖的顯示還是返回至上級(jí)數(shù)據(jù)圖的顯示，即當(dāng)用戶選擇退出時(shí)，則執(zhí)行步驟S214，當(dāng)用戶選擇返回上級(jí)時(shí)，則執(zhí)行步驟S202。

步驟S214，退出。

需要說明的是，本申請(qǐng)實(shí)施例可以在加載矩形樹圖的ECharts容器上方放置一個(gè)HTML元素(即標(biāo)題欄)，在標(biāo)題欄中設(shè)置一個(gè)回退按鈕，并將標(biāo)題欄的CSS display屬性置為none，讓該標(biāo)題欄在初始化狀態(tài)下不可見，當(dāng)用戶點(diǎn)擊矩形樹圖某矩形塊實(shí)現(xiàn)數(shù)據(jù)下鉆時(shí)，在生成對(duì)應(yīng)下級(jí)數(shù)據(jù)圖的同時(shí)調(diào)用JavaScript或JQuery方法將上述標(biāo)題欄的CSS display屬性置為block，令其可見，如圖4所示。并可以在回退按鈕上綁定一個(gè)click()函數(shù)，當(dāng)點(diǎn)擊回退按鈕時(shí)會(huì)將標(biāo)題欄的CSS display屬性置為none，令其不可見，并重載上級(jí)數(shù)據(jù)圖數(shù)據(jù)。

從以上的描述中，可以看出，在本申請(qǐng)實(shí)施例在用戶點(diǎn)擊矩形樹圖中某一模塊進(jìn)入對(duì)應(yīng)的下級(jí)數(shù)據(jù)圖時(shí)，會(huì)自動(dòng)在矩形樹圖上生成一個(gè)標(biāo)題欄，且標(biāo)題欄上設(shè)置有回退按鈕，通過點(diǎn)擊回退按鈕即可重載上級(jí)數(shù)據(jù)圖，以實(shí)現(xiàn)下級(jí)數(shù)據(jù)圖與上級(jí)數(shù)據(jù)圖之間的切換，此外，本申請(qǐng)實(shí)施例在實(shí)現(xiàn)數(shù)據(jù)圖回退時(shí)增加的代碼量少，操作方法簡(jiǎn)單，無需修改ECharts源碼即可實(shí)現(xiàn)上級(jí)數(shù)據(jù)圖和次級(jí)數(shù)據(jù)圖之間切換的功能，交互更加方便，且用戶體驗(yàn)更好。

需要說明的是，在附圖的流程圖示出的步驟可以在諸如一組計(jì)算機(jī)可執(zhí)行指令的計(jì)算機(jī)系統(tǒng)中執(zhí)行，并且，雖然在流程圖中示出了邏輯順序，但是在某些情況下，可以以不同于此處的順序執(zhí)行所示出或描述的步驟。

根據(jù)本申請(qǐng)實(shí)施例的另一方面，提供了一種矩形樹圖處理裝置，該矩形樹圖處理裝置可以用于執(zhí)行本申請(qǐng)實(shí)施例的矩形樹圖處理方法，本申請(qǐng)實(shí)施例的矩形樹圖處理方法也可以通過本申請(qǐng)實(shí)施例的矩形樹圖處理裝置來執(zhí)行。

本申請(qǐng)實(shí)施例的矩形樹圖包括多級(jí)數(shù)據(jù)圖，圖6是根據(jù)本申請(qǐng)實(shí)施例的矩形樹圖處理裝置的示意圖，如圖6所示，該裝置包括：第一顯示單元10、監(jiān)聽單元20和第二顯示單元30。

第一顯示單元10，用于在矩形樹圖數(shù)據(jù)下鉆至第N級(jí)數(shù)據(jù)圖時(shí)，在矩形樹圖上顯示回退標(biāo)識(shí)，其中，N為大于1的整數(shù)。

可選地，該回退標(biāo)識(shí)可以是按鈕、標(biāo)簽或是下拉框等，對(duì)該回退標(biāo)識(shí)預(yù)先注冊(cè)了用于數(shù)據(jù)圖返回的方法或函數(shù)。

監(jiān)聽單元20，用于監(jiān)聽對(duì)回退標(biāo)識(shí)的觸發(fā)事件。

第二顯示單元30，用于在監(jiān)聽到回退標(biāo)識(shí)的觸發(fā)事件時(shí)，顯示第N級(jí)數(shù)據(jù)圖的上級(jí)數(shù)據(jù)圖。

本申請(qǐng)實(shí)施例通過第一顯示單元10在矩形樹圖數(shù)據(jù)下鉆至第N級(jí)數(shù)據(jù)圖時(shí)，在矩形樹圖上顯示回退標(biāo)識(shí)，其中，N為大于1的整數(shù)；監(jiān)聽單元20監(jiān)聽對(duì)回退標(biāo)識(shí)的觸發(fā)事件；以及第二顯示單元30在監(jiān)聽到回退標(biāo)識(shí)的觸發(fā)事件時(shí)，顯示第N級(jí)數(shù)據(jù)圖的上級(jí)數(shù)據(jù)圖，解決了相關(guān)技術(shù)中矩形樹圖數(shù)據(jù)下鉆后返回至上級(jí)數(shù)據(jù)圖時(shí)操作較為不便的問題，進(jìn)而達(dá)到了在矩形樹圖數(shù)據(jù)下鉆后方便快捷地返回至上級(jí)數(shù)據(jù)圖的效果。

優(yōu)選地，回退標(biāo)識(shí)用于指示回退至第N級(jí)數(shù)據(jù)圖的上一級(jí)數(shù)據(jù)圖，第二顯示單元包括：第一顯示模塊，用于顯示第N-1級(jí)數(shù)據(jù)圖。

優(yōu)選地，N為大于2的整數(shù)，第二顯示單元包括：判斷模塊，用于判斷回退標(biāo)識(shí)所對(duì)應(yīng)的數(shù)據(jù)圖層級(jí)，其中，回退標(biāo)識(shí)所對(duì)應(yīng)的數(shù)據(jù)圖層級(jí)小于N；以及第二顯示模塊，用于顯示回退標(biāo)識(shí)所對(duì)應(yīng)的數(shù)據(jù)圖層級(jí)對(duì)應(yīng)的數(shù)據(jù)圖。

優(yōu)選地，第一顯示單元包括：獲取模塊，用于獲取第N級(jí)數(shù)據(jù)圖對(duì)應(yīng)的訪問路徑，其中，第N級(jí)數(shù)據(jù)圖對(duì)應(yīng)的訪問路徑為從矩形樹圖的第一級(jí)數(shù)據(jù)圖至第N級(jí)數(shù)據(jù)圖的訪問路徑；生成模塊，用于根據(jù)訪問路徑生成第N級(jí)數(shù)據(jù)圖對(duì)應(yīng)的回退標(biāo)識(shí)；以及第三顯示模塊，用于在矩形樹圖上顯示回退標(biāo)識(shí)。

所述矩形樹圖處理裝置包括處理器和存儲(chǔ)器，上述第一顯示單元、監(jiān)聽單元和第二顯示單元等均作為程序單元存儲(chǔ)在存儲(chǔ)器中，由處理器執(zhí)行存儲(chǔ)在存儲(chǔ)器中的上述程序單元來實(shí)現(xiàn)相應(yīng)的功能。

處理器中包含內(nèi)核，由內(nèi)核去存儲(chǔ)器中調(diào)取相應(yīng)的程序單元。內(nèi)核可以設(shè)置一個(gè)或以上，通過調(diào)整內(nèi)核參數(shù)來在矩形樹圖數(shù)據(jù)下鉆后返回至上級(jí)數(shù)據(jù)圖。

存儲(chǔ)器可能包括計(jì)算機(jī)可讀介質(zhì)中的非永久性存儲(chǔ)器，隨機(jī)存取存儲(chǔ)器(RAM)和/或非易失性內(nèi)存等形式，如只讀存儲(chǔ)器(ROM)或閃存(flash RAM)，存儲(chǔ)器包括至少一個(gè)存儲(chǔ)芯片。

本申請(qǐng)還提供了一種計(jì)算機(jī)程序產(chǎn)品，當(dāng)在數(shù)據(jù)處理設(shè)備上執(zhí)行時(shí)，適于執(zhí)行初始化有如下方法步驟的程序代碼：當(dāng)矩形樹圖數(shù)據(jù)下鉆至第N級(jí)數(shù)據(jù)圖時(shí)，在矩形樹圖上顯示回退標(biāo)識(shí)，其中，N為大于1的整數(shù)；監(jiān)聽對(duì)回退標(biāo)識(shí)的觸發(fā)事件；以及當(dāng)監(jiān)聽到回退標(biāo)識(shí)的觸發(fā)事件時(shí)，顯示第N級(jí)數(shù)據(jù)圖的上級(jí)數(shù)據(jù)圖。

上述本申請(qǐng)實(shí)施例序號(hào)僅僅為了描述，不代表實(shí)施例的優(yōu)劣。

在本申請(qǐng)的上述實(shí)施例中，對(duì)各個(gè)實(shí)施例的描述都各有側(cè)重，某個(gè)實(shí)施例中沒有詳述的部分，可以參見其他實(shí)施例的相關(guān)描述。

在本申請(qǐng)所提供的幾個(gè)實(shí)施例中，應(yīng)該理解到，所揭露的技術(shù)內(nèi)容，可通過其它的方式實(shí)現(xiàn)。其中，以上所描述的裝置實(shí)施例僅僅是示意性的，例如所述單元的劃分，可以為一種邏輯功能劃分，實(shí)際實(shí)現(xiàn)時(shí)可以有另外的劃分方式，例如多個(gè)單元或組件可以結(jié)合或者可以集成到另一個(gè)系統(tǒng)，或一些特征可以忽略，或不執(zhí)行。另一點(diǎn)，所顯示或討論的相互之間的耦合或直接耦合或通信連接可以是通過一些接口，單元或模塊的間接耦合或通信連接，可以是電性或其它的形式。

所述作為分離部件說明的單元可以是或者也可以不是物理上分開的，作為單元顯示的部件可以是或者也可以不是物理單元，即可以位于一個(gè)地方，或者也可以分布到多個(gè)單元上?？梢愿鶕?jù)實(shí)際的需要選擇其中的部分或者全部單元來實(shí)現(xiàn)本實(shí)施例方案的目的。

另外，在本申請(qǐng)各個(gè)實(shí)施例中的各功能單元可以集成在一個(gè)處理單元中，也可以是各個(gè)單元單獨(dú)物理存在，也可以兩個(gè)或兩個(gè)以上單元集成在一個(gè)單元中。上述集成的單元既可以采用硬件的形式實(shí)現(xiàn)，也可以采用軟件功能單元的形式實(shí)現(xiàn)。

所述集成的單元如果以軟件功能單元的形式實(shí)現(xiàn)并作為獨(dú)立的產(chǎn)品銷售或使用時(shí)，可以存儲(chǔ)在一個(gè)計(jì)算機(jī)可讀取存儲(chǔ)介質(zhì)中?；谶@樣的理解，本申請(qǐng)的技術(shù)方案本質(zhì)上或者說對(duì)現(xiàn)有技術(shù)做出貢獻(xiàn)的部分或者該技術(shù)方案的全部或部分可以以軟件產(chǎn)品的形式體現(xiàn)出來，該計(jì)算機(jī)軟件產(chǎn)品存儲(chǔ)在一個(gè)存儲(chǔ)介質(zhì)中，包括若干指令用以使得一臺(tái)計(jì)算機(jī)設(shè)備(可為個(gè)人計(jì)算機(jī)、服務(wù)器或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本申請(qǐng)各個(gè)實(shí)施例所述方法的全部或部分步驟。而前述的存儲(chǔ)介質(zhì)包括：U盤、只讀存儲(chǔ)器(ROM，Read-Only Memory)、隨機(jī)存取存儲(chǔ)器(RAM，Random Access Memory)、移動(dòng)硬盤、磁碟或者光盤等各種可以存儲(chǔ)程序代碼的介質(zhì)。

以上所述僅是本申請(qǐng)的優(yōu)選實(shí)施方式，應(yīng)當(dāng)指出，對(duì)于本技術(shù)領(lǐng)域的普通技術(shù)人 員來說，在不脫離本申請(qǐng)?jiān)淼那疤嵯?，還可以做出若干改進(jìn)和潤(rùn)飾，這些改進(jìn)和潤(rùn)飾也應(yīng)視為本申請(qǐng)的保護(hù)范圍。