碩士論文——基于D3技術(shù)與Fiori框架的數(shù)據(jù)可視化功能研究與實(shí)現(xiàn)

1、基于d3技術(shù)與fiori框架的數(shù)據(jù)可視化功能研究與實(shí)現(xiàn)摘 要：sap的fiori框架因?yàn)槠淞己玫挠脩趔w驗(yàn)與交互，在近年的sap軟件的開發(fā)中被越來越多的使用， 但是fiori框架本身缺乏了一些在實(shí)際的業(yè)務(wù)需求中不具備的展示功能，使得僅僅使用fiori框架無法滿足 特定的業(yè)務(wù)需求。而d3庫(kù)是經(jīng)典的數(shù)擁可視化庫(kù)，如果可以將兩者很好的結(jié)合便可以使得很多數(shù)據(jù)可視化 問題得以解決。本文首先分析了 fiori框架本身以及d3庫(kù)的優(yōu)劣勢(shì)，然后詳細(xì)研究了 fiori框架與d3庫(kù)結(jié) 合的町能性，最后在實(shí)際項(xiàng)目屮實(shí)現(xiàn)了 fiori框架少d3庫(kù)的結(jié)合。關(guān)鍵詞：fiori框架；數(shù)據(jù)可視化；d3abstract: sth

2、e fiori frame was used more frequently for the great user experienee in recent years.however there are some limitations of the fiori frame that it can not meet the requirement of the business.the fiori frame can not make the data visualization great however the d3 library is the classic library of d

3、ata visualization, if the fiori frame can combine the d3 library ,it can solve the problem of data visualization in the fiori frame.at first, this paper an a lyzes the fiori frame and the adva ntages and disadva ntages of the fiori frame and the d3 library.the n it discussed the possibility of combi

4、ning the fiori frame and the d3 library.at last, it realized the combi nation of the fiori frame and the d3 library in the project.key words: fiori frame; data visualization ; d3 libraryfiori框架是由徳國(guó)sap公司推出的開發(fā)組件。這套開發(fā)組件采用了html5技術(shù)，用來構(gòu) 建和適配客戶端程序的用戶接口。作為sap使用的快速開發(fā)ui的技術(shù)框架，fiori具有有極好 的性能。fiori框架可以幫助快速的構(gòu)建企業(yè)級(jí)

5、的javascript框架，并且由于其擁有超過360個(gè) 豐富的控件，豐富的css頁(yè)面展示模板，使得其在很多應(yīng)用屮得到使用。但是fiori框架有著 一定的封閉性，同時(shí)也不能覆蓋所有的業(yè)務(wù)需要。而經(jīng)典的d3 (data-driven documents：數(shù) 據(jù)驅(qū)動(dòng)文檔)庫(kù)，是基于數(shù)據(jù)的文檔操作庫(kù)，可以在一定程度上彌補(bǔ)fiori框架的不足。d3 能夠把數(shù)據(jù)和html、svg、css結(jié)合起來，創(chuàng)造出可交互的各種圖表，對(duì)于數(shù)據(jù)的可視化有 著極大的幫助。本文討論了 fiori現(xiàn)有框架的優(yōu)勢(shì)與劣勢(shì)，同時(shí)研究d3庫(kù)中存在但在fiori框架屮沒有 實(shí)現(xiàn)的可視化工具，在此基礎(chǔ)上提出了將d3庫(kù)與現(xiàn)有的fiori框架

6、相結(jié)合的設(shè)汁方案。1 d3技術(shù)的特性d3是一種在數(shù)據(jù)文檔javascripte庫(kù)基礎(chǔ)上開發(fā)的可視化數(shù)據(jù)處理技術(shù),通過將數(shù)據(jù)與html、 svg和css相結(jié)合，使原本的數(shù)據(jù)可以通過不同的方式展現(xiàn)出來，從而保證了數(shù)據(jù)的具象化, 可視化。1.1便利性d3.js采用的是鏈?zhǔn)秸Z法，極大的方便了對(duì)庫(kù)中函數(shù)方法的調(diào)用。例如： d3.select("#vistable").style("color", white)通過連續(xù)的引用d3所定義的函數(shù)方便的選中了指 定的元素并且為其添加了新的屬性。d3并不是一個(gè)新的圖形展示庫(kù)，不同于processing, raphael或者p

7、rotovis,標(biāo)記詞匯表是直接來源于web標(biāo)準(zhǔn)的。如果瀏覽器的廠家在未來引 入新的特性，不需要等到庫(kù)更新，便可以第一時(shí)間使用最新的特性。更重要的是，d3可以 很容易的使用瀏覽器內(nèi)置的元素審查器進(jìn)行調(diào)試，因?yàn)閐3操作的節(jié)點(diǎn)就是瀏覽器原生支持 的節(jié)點(diǎn)。1.2高效性d3不是一個(gè)整體的數(shù)據(jù)處理框架，理論上并不具備對(duì)數(shù)據(jù)的全面處理能力，其解決問 題的關(guān)鍵在于基于數(shù)據(jù)文件的高效操作。使用web標(biāo)準(zhǔn)的功能例如css3, html5和svg, 可以通過最小的開銷，獲得非?？斓乃俣?。在常見的二維數(shù)據(jù)表中，數(shù)據(jù)信息之間的關(guān)系并不立體，很多關(guān)系被忽視，利用d3可 以從海量數(shù)據(jù)屮總結(jié)出數(shù)據(jù)z間的關(guān)系網(wǎng)絡(luò)，通過圖形的

8、形式可視化的呈現(xiàn)出來，保證數(shù)據(jù) 信息之間的關(guān)系能夠充分體現(xiàn)。13自由度高d3支持多種數(shù)據(jù)的格式，包插json、xml、csv、html等。雖然由于在使用php語言 時(shí)，數(shù)組可以很簡(jiǎn)單的轉(zhuǎn)換為json格式，json格式的數(shù)據(jù)被更多的使用，但是理論上d3 對(duì)于數(shù)據(jù)的類型沒有嚴(yán)格的要求。d3內(nèi)置了一個(gè)功能強(qiáng)大的內(nèi)建布局，叫做force-directed graph (受力導(dǎo)向圖)。受力導(dǎo)向圖布局模擬了一些基本的物理粒子原理，比如重力，引 力和斥力，并且可以調(diào)節(jié)力的大小和受力距離，因此在其內(nèi)部的操作具有極高的自由度。1.4適用性高d3利用的svg是基于可擴(kuò)展標(biāo)記語言(xml),用于描述二維矢量圖形的一

9、種圖形格 式。svg是國(guó)際互聯(lián)網(wǎng)標(biāo)準(zhǔn)組織(world wide web consortium,w3c)在2000年8月制定的 規(guī)范的網(wǎng)絡(luò)矢量圖形標(biāo)準(zhǔn)。svg嚴(yán)格遵從xml語法，并用文本格式的描述性語言來描述圖 像內(nèi)容，因此是一種和圖像分辨率無關(guān)的矢量圖形格式。同時(shí)svg完全支持dom(document object model文檔對(duì)象模型)，d0m可以允許程序或者腳本動(dòng)態(tài)的存儲(chǔ)和上傳文件的內(nèi)容、 結(jié)構(gòu)或者樣式。因此svg文檔可以通過一致的接口和外界的程序進(jìn)行交互。同時(shí)各大瀏覽器廠商最新版本的瀏覽器基本都支持svgo因此釆用依賴于svg的d3可 以使得程序的適用性得到提高。2 fiori框架的優(yōu)

10、劣勢(shì)fiori框架是sap公司開發(fā)的一套整體框架，這套框架的開發(fā)初衷在于更新sap的erp系統(tǒng) 的界面。但是由于sap公司并不是一家專門的開發(fā)ui的公司，所以必然有英不足之處。fiori 框架的后臺(tái)數(shù)據(jù)依靠cdsview提供，并且通過odata的數(shù)據(jù)模式暴賽出來。前臺(tái)使用sap ui5 的庫(kù)，形成前臺(tái)所需要的ui。同時(shí)fiori中包含了很多smart control控件，可以方便的綁定odata model,形成數(shù)據(jù)交互。2.1 fiori框架的優(yōu)勢(shì)fiori框架作為ui的框架，其軟件的整體架構(gòu)包括hana database、cds view、odata service 以及fiorio如圖1

11、所示。圖1sap軟件架構(gòu)圖傳統(tǒng)的sap軟件架構(gòu)如下：(1) 最底層是sap的hana數(shù)據(jù)庫(kù)，為所有程序提供單一的數(shù)據(jù)源。(2) 在數(shù)據(jù)庫(kù)上面一層是cds view,通過對(duì)hana數(shù)據(jù)庫(kù)中的表進(jìn)行搜索，并且通過特 定的語意標(biāo)識(shí)來實(shí)現(xiàn)一定的業(yè)務(wù)邏輯。由于cds view是直接從hana數(shù)據(jù)庫(kù)直接讀取數(shù)據(jù)， 所以速度是較快的，因此盡量在這一層處理邏輯，從而達(dá)到最好的性能。(3) 在cds view直接從hana數(shù)據(jù)庫(kù)讀到數(shù)據(jù)并且實(shí)現(xiàn)了部分邏輯后，暴露出odata service,為最上層提供數(shù)據(jù)。fiori框架在得到odata service后，利用獲取的數(shù)據(jù)形成前臺(tái)。 并且通過綁定odata的模型

12、，可以方便的使用在fiori框架中已經(jīng)定義過的smart系列控件，達(dá) 到與后臺(tái)數(shù)據(jù)的交互。2.2 fiori框架存在的問題fiori框架是基于sap ui5框架的，有很多包裝好的方便使用的控件，但是也因此失去了 一些靈活性。沒有很多可以定制的空間，使得當(dāng)出現(xiàn)了 fiori框架沒有定制的控件時(shí)，不得 不使用替代方案，無法達(dá)到最佳效果。在使用fiori框架的同時(shí)，想要可以實(shí)現(xiàn)更好的數(shù)據(jù)可視化，就可以借助外部的數(shù)據(jù)可 視化庫(kù)，但是在使兩者結(jié)合時(shí)，會(huì)有以下的問題：(1) fiori框架中，利用xml文件來定義界面，并通過js文件來進(jìn)行控制，但是在d3 中是完全是用js來實(shí)現(xiàn)的各種數(shù)據(jù)可視化，中i

13、9;可存在差異。(2) d3庫(kù)雖然支持各種數(shù)據(jù)模式，但是并不支持fiori最常使用的odata的數(shù)據(jù)模式。 因此需要將odata的數(shù)據(jù)類型轉(zhuǎn)化為d3所使用的數(shù)據(jù)類型。(3) 由于fiori后臺(tái)使用的是cdsview所以有部分邏輯無法實(shí)現(xiàn)，需要在前端添加額外 的邏輯，包括對(duì)數(shù)據(jù)的重新組合，使其符合要求。3改進(jìn)的fiori框架可視化策略針對(duì)目前fiori框架的這些可視化方面的問題，如果等待fiori框架的團(tuán)隊(duì)來解決，顯然 無法快速方便實(shí)現(xiàn)。所以，本文提出了一種定制化的fiori框架的可視化策略，使fiori項(xiàng)目 屮可以展現(xiàn)出利潤(rùn)樹這種財(cái)務(wù)業(yè)務(wù)中非常常見的數(shù)據(jù)可視化工具。3.1改進(jìn)的fiori框架工

14、作流程改進(jìn)的fiori框架將可以利用d3的可視化功能，其主要工作流程如圖2所示。圖2改進(jìn)的http摘要流程圖改進(jìn)的fiori框架的工作步驟如下：(1) 前端向服務(wù)器發(fā)起一個(gè)數(shù)據(jù)請(qǐng)求。這個(gè)數(shù)據(jù)請(qǐng)求包括了利潤(rùn)分析所需要的信息，包 括項(xiàng)目名稱，數(shù)據(jù)報(bào)表結(jié)構(gòu)等。(2) 服務(wù)器得到前臺(tái)的請(qǐng)求后，根據(jù)請(qǐng)求在hana數(shù)據(jù)庫(kù)屮獲得對(duì)應(yīng)的數(shù)據(jù)并且返回 odata類型的數(shù)據(jù)。(3) 前端獲得了后臺(tái)返回的odata類型的數(shù)據(jù)后，首先將odata類型的數(shù)據(jù)轉(zhuǎn)化為需要 的json類型。(4) 在轉(zhuǎn)化為json格式的數(shù)據(jù)后，需要對(duì)數(shù)據(jù)進(jìn)行進(jìn)一步的處理。首先對(duì)所有數(shù)據(jù)進(jìn) 行分類，利用數(shù)據(jù)屮的fixedstructureit

15、em字段，將所有數(shù)據(jù)分為收入與支出兩種。然后對(duì)每 種類型的數(shù)據(jù)，進(jìn)行層級(jí)結(jié)構(gòu)的連接。由于后臺(tái)的cdsview無法處理層級(jí)結(jié)構(gòu)，所以返冋的 僅僅是平面的結(jié)構(gòu)，需要在前臺(tái)將各個(gè)數(shù)據(jù)連接起來。由于后臺(tái)返回的數(shù)據(jù)中沒有最終利潤(rùn) 樹屮需要的合計(jì)的收入和支出的結(jié)杲，所以需要根據(jù)上一步的分類，在數(shù)據(jù)結(jié)果集中加入剩 下的合訃的數(shù)據(jù)。最后，在所有運(yùn)算結(jié)束后，將數(shù)據(jù)再次整理為，d3繪制樹形圖所需要的json 格式，也就是將所有數(shù)據(jù)整合到同一個(gè)tree-josn屮。(5) 在使用d3前，需要給d3注冊(cè)一個(gè)元素。在fiori對(duì)應(yīng)js文件的xml文件中，使用fiori 中的core類，仿照html中的寫法，定義出一塊d

16、iv元素。(6) 在xml文件對(duì)應(yīng)的js文件中，利用d3.select函數(shù)獲取定義的元素。由于d3利用了svg 的技術(shù)，所以需要在獲収的元素上面append-個(gè)svg的對(duì)象。(刀在得到svg對(duì)象后，需要對(duì)其屈性進(jìn)行設(shè)置，包括高度、寬度，并且調(diào)用zoom對(duì)彖 設(shè)置其屬性。利用d3中內(nèi)置的基本的tree對(duì)彖，利用已經(jīng)準(zhǔn)備好的treason屮的數(shù)據(jù)，根據(jù) 其中的層級(jí)結(jié)構(gòu)，遞歸創(chuàng)建出基本的節(jié)點(diǎn)。同時(shí)設(shè)置對(duì)應(yīng)的節(jié)點(diǎn)的點(diǎn)擊事件，以及動(dòng)態(tài)的漸 變效果。最終形成一棵利潤(rùn)樹。(8)為了實(shí)現(xiàn)與fiori其它控件的聯(lián)動(dòng)，例如與條形圖的聯(lián)動(dòng)，選中條形圖的同時(shí)，需要 對(duì)選中的條形圖中的對(duì)象進(jìn)行獲取，提取其中的標(biāo)準(zhǔn)信息，

17、重新構(gòu)造tree-jsono并且在刷新 時(shí)首先判斷div元素中內(nèi)容是否為空。若為空，調(diào)用div對(duì)象的empty方法將其清空，重新繪制 利潤(rùn)樹。3.2改進(jìn)的fiori框架分析改進(jìn)的fiori框架是基于傳統(tǒng)的fiori框架，因此繼承了傳統(tǒng)的fiori框架的優(yōu)點(diǎn)。同時(shí)又 將d3這種可以很好的進(jìn)行數(shù)據(jù)可視化的庫(kù)融了進(jìn)來，彌補(bǔ)了傳統(tǒng)的fiori框架在數(shù)據(jù)可視化 方面的不足。在不破壞原有的fiori架構(gòu)的同時(shí)，很好的解決了以下問題：(1) 無法得到層級(jí)結(jié)構(gòu)的數(shù)據(jù):傳統(tǒng)的fiori框架的后臺(tái)數(shù)據(jù)是通過cdsview來提供的。 雖然cdsview有很多很好的特性，包括速度快，可以通過語義注釋來幫助形成前臺(tái)界面

18、， 但是cdsview有著自身的局限性就是無法處理層級(jí)結(jié)構(gòu)并且無法處理遞歸。在改進(jìn)的fiori 框架屮，通過在前臺(tái)獲取到后臺(tái)的數(shù)據(jù)，在前臺(tái)進(jìn)行了對(duì)層級(jí)結(jié)構(gòu)的處理，使得層級(jí)機(jī)構(gòu)的 數(shù)據(jù)可以正確的顯示。(2) 無法合理的實(shí)現(xiàn)數(shù)據(jù)可視化：傳統(tǒng)的fiori框架中根據(jù)sap ui5庫(kù)來定義各種控件, 雖然有很大的便利，但是在數(shù)據(jù)可視化方面，沒有專門為數(shù)據(jù)可視化服務(wù)的d3功能強(qiáng)大。 合理的將fiori框架和d3相結(jié)合，很好的解決了 fiori框架的在數(shù)據(jù)可視化方而的不足。4方案實(shí)現(xiàn)與驗(yàn)證為實(shí)現(xiàn)改進(jìn)的fiori框架，需要使用到d3屮的幾個(gè)關(guān)鍵方法。方案是基于sap easi (embedded analyt

19、ics enabled by semantic infrastructure )項(xiàng)目實(shí)現(xiàn)的。4.1 d3中的關(guān)鍵方法d3.select:從當(dāng)前文檔中選擇出一些列元素，只有選定了元素才能有后面的動(dòng)作。d3.attr:設(shè)置或獲取指定屬性，在js屮由于屬性也可以是方法，所以經(jīng)常通過d3.attr這 個(gè)方法來處理一些事件。selection.append創(chuàng)建并添加新元素到選定元素后，通過不斷的在選擇的元素后面添加 新的元素將其慢慢擴(kuò)展成最終的可視化樹。tree.children:置或者獲取子節(jié)點(diǎn)的訪問器，通過這個(gè)方法來處理節(jié)點(diǎn)之i'可的父子關(guān)系, 從而形成層級(jí)關(guān)系。tree.nodes:計(jì)算并

20、返回指定節(jié)點(diǎn)的子節(jié)點(diǎn)的信息，通過該方法來生產(chǎn)組成樹的結(jié)點(diǎn)。tree.links:指定一個(gè)子節(jié)點(diǎn)組(通常是nodes函數(shù)返回值)，計(jì)算它們與父節(jié)點(diǎn)的連接信 息。tree.nodesize:給所有節(jié)點(diǎn)指定一個(gè)固定的大小。tree.separation:i$置或獲取像個(gè)節(jié)點(diǎn)之i'可的i'可隔計(jì)算函數(shù)。4.2數(shù)據(jù)處理方法在獲得了 json格式的數(shù)據(jù)后，需要對(duì)數(shù)據(jù)進(jìn)行另外的邏輯處理。具體實(shí)現(xiàn)此處不進(jìn)行 討論，主要包括：(1) 遍歷數(shù)據(jù)集，對(duì)所有數(shù)據(jù)分類。(2) 根據(jù)選擇條件計(jì)算合計(jì)值。(3) 遞歸實(shí)現(xiàn)父子關(guān)系的結(jié)果字符串。4.3實(shí)驗(yàn)結(jié)果實(shí)驗(yàn)結(jié)果如圖3所示，作為嵌入在fiori框架中的利潤(rùn)樹，充分利用了 d3與fiori的特 性形