[發(fā)明專(zhuān)利]實(shí)時(shí)數(shù)據(jù)在web應(yīng)用中的自定義可視化展示方法

有效

• 申請(qǐng)?zhí)枺?/td>: 201711455191.0
• 申請(qǐng)日: 2017-12-28
• 公開(kāi)（公告）號(hào): CN108153886B
• 公開(kāi)（公告）日: 2021-02-02
• 發(fā)明（設(shè)計(jì)）人: 錢(qián)蘇晉;劉愛(ài)軍;張成虎;康紀(jì)華;張愛(ài)新
• 申請(qǐng)（專(zhuān)利權(quán)）人: 北京恒泰實(shí)達(dá)科技股份有限公司
• 主分類(lèi)號(hào): G06F16/957
• 分類(lèi)號(hào): G06F16/957
• 代理公司: 北京市盛峰律師事務(wù)所 11337
• 代理人: 席小東

1.一種實(shí)時(shí)數(shù)據(jù)在web應(yīng)用中的自定義可視化展示方法，其特征在于，包括以下步驟：

步驟1，設(shè)計(jì)器配置有若干個(gè)不同類(lèi)型的顯示控件；對(duì)于每種類(lèi)型的顯示控制，均執(zhí)行以下步驟2-步驟6；

步驟2，將顯示控件拖動(dòng)到所創(chuàng)建的畫(huà)布上面；

對(duì)布置于所述畫(huà)布的顯示控件進(jìn)行自定義設(shè)置，設(shè)置所述顯示控件的屬性信息，同時(shí)，每個(gè)所述顯示控件均綁定待展示數(shù)據(jù)的數(shù)據(jù)源ID；

步驟3，設(shè)計(jì)器將顯示控件的屬性信息以及綁定的數(shù)據(jù)源ID的對(duì)應(yīng)關(guān)系，作為一條記錄信息存儲(chǔ)到記錄數(shù)據(jù)庫(kù)中；

此外，設(shè)計(jì)器創(chuàng)建并維護(hù)記錄列表，所述記錄列表存儲(chǔ)每條記錄信息的記錄ID；每當(dāng)所述設(shè)計(jì)器向所述數(shù)據(jù)庫(kù)中存儲(chǔ)一條記錄信息時(shí)，所述設(shè)計(jì)器即更新所述記錄列表；所述設(shè)計(jì)器將所述記錄列表存儲(chǔ)到記錄列表數(shù)據(jù)庫(kù)中；

步驟4，WEB播放器啟動(dòng)后，從所述記錄列表數(shù)據(jù)庫(kù)中加載所述記錄列表，在所述WEB播放器的播放列表中，以列表形式顯示每條記錄信息的記錄ID；對(duì)于每條記錄ID，均執(zhí)行步驟5和步驟6；

步驟5，觸發(fā)某條記錄ID，所述WEB播放器向所述記錄數(shù)據(jù)庫(kù)中發(fā)送查詢(xún)所述記錄ID對(duì)應(yīng)的記錄信息的查詢(xún)請(qǐng)求消息；所述WEB播放器接收所述記錄數(shù)據(jù)庫(kù)返回的記錄信息；所述WEB播放器解析所述記錄信息，獲得顯示控件的屬性信息以及綁定的數(shù)據(jù)源ID；

然后，所述WEB播放器根據(jù)所述顯示控件的屬性信息，重構(gòu)出對(duì)應(yīng)的顯示控件；重構(gòu)出的顯示控件綁定數(shù)據(jù)源ID；

步驟6，所述WEB播放器將重構(gòu)出的顯示控件以及綁定的數(shù)據(jù)源ID，作為顯示控件組件保存；

至此，將設(shè)計(jì)器自定義的每個(gè)類(lèi)型的顯示控件及綁定的數(shù)據(jù)源ID，均轉(zhuǎn)化為WEB播放器中的對(duì)應(yīng)的顯示控件組件；

步驟7，由于每個(gè)顯示控件組件均包括綁定的重構(gòu)出的顯示控件以及綁定的數(shù)據(jù)源ID，由此實(shí)現(xiàn)了數(shù)據(jù)源和重構(gòu)出的顯示控件的同步性；因此，數(shù)據(jù)源的數(shù)據(jù)實(shí)時(shí)到達(dá)所述WEB播放器時(shí)，所述WEB播放器根據(jù)數(shù)據(jù)源ID，查詢(xún)到對(duì)應(yīng)的顯示控件組件；然后，所述WEB播放器調(diào)用查詢(xún)到的所述顯示控件組件，并采用所述數(shù)據(jù)源渲染查詢(xún)到的顯示控件組件中的顯示控件，實(shí)現(xiàn)動(dòng)態(tài)實(shí)時(shí)數(shù)據(jù)的自定義可視化展示；

其中，步驟5中，所述WEB播放器接收所述記錄數(shù)據(jù)庫(kù)返回的記錄信息，具體為：

所述記錄數(shù)據(jù)庫(kù)將查詢(xún)到的所述記錄信息轉(zhuǎn)換為json格式，并通過(guò)websocket通信技術(shù)將json格式的記錄信息推送給所述WEB播放器；

其中，所述WEB播放器根據(jù)所述顯示控件的屬性信息，重構(gòu)出對(duì)應(yīng)的顯示控件；重構(gòu)出的顯示控件綁定數(shù)據(jù)源ID，具體為：

Web播放器接收到j(luò)son格式的記錄信息之后，通過(guò)web播放器內(nèi)部的javascript代碼將json格式的記錄信息轉(zhuǎn)換為web播放器所需的對(duì)象數(shù)據(jù)格式，然后，將對(duì)象數(shù)據(jù)格式的記錄信息存儲(chǔ)到web播放器本地的狀態(tài)管理工具內(nèi)；

web播放器內(nèi)部javascript的Object.defineProperty的setter或getter對(duì)狀態(tài)管理工具進(jìn)行實(shí)時(shí)監(jiān)聽(tīng)，因此，每當(dāng)狀態(tài)管理工具內(nèi)的數(shù)據(jù)發(fā)生改變時(shí)，setter或getter均會(huì)監(jiān)聽(tīng)到這一改變事件，setter或getter將監(jiān)聽(tīng)到的狀態(tài)管理工具接收到新的對(duì)象數(shù)據(jù)格式的記錄信息發(fā)送給web播放器內(nèi)置的對(duì)應(yīng)顯示控件，并根據(jù)顯示控件的屬性信息，驅(qū)動(dòng)web播放器內(nèi)的各個(gè)DOM以及canvas，對(duì)所述web播放器內(nèi)置的對(duì)應(yīng)顯示控件進(jìn)行渲染，得到屬性與所述設(shè)計(jì)器自定義設(shè)置的顯示控件相同的顯示控件；

其中，將設(shè)計(jì)器自定義的每個(gè)類(lèi)型的顯示控件及綁定的數(shù)據(jù)源ID，均轉(zhuǎn)化為WEB播放器中的對(duì)應(yīng)的顯示控件組件，之后還包括：

利用網(wǎng)狀式的組件化開(kāi)發(fā)技術(shù)，當(dāng)需要采用不同類(lèi)型的顯示控件可視化展示同一數(shù)據(jù)源時(shí)，將選擇的不同類(lèi)型的顯示控件對(duì)應(yīng)的顯示控件組件，作為子組件調(diào)配集中到一個(gè)總組件中；將各個(gè)子組件的屬性賦予到所述總組件；因此，當(dāng)需要采用不同類(lèi)型的顯示控件同時(shí)可視化展示數(shù)據(jù)源時(shí)，調(diào)用所述總組件，對(duì)所述總組件進(jìn)行渲染即可；

其中，步驟1中，所述顯示控件包括數(shù)據(jù)圖表類(lèi)型控件和圖片類(lèi)型控件；

其中，所述數(shù)據(jù)圖表類(lèi)型控件包括柱狀圖類(lèi)型控件、折線(xiàn)圖類(lèi)型控件或泡泡圖類(lèi)型控件；

其中，步驟2中，所述顯示控件的屬性信息包括顯示控控件的坐標(biāo)信息、顯示控件的大小信息以及顯示控件的顏色信息；

實(shí)時(shí)數(shù)據(jù)在web應(yīng)用中的自定義可視化展示方法，具有以下特點(diǎn)：

（1）Websocket數(shù)據(jù)推送取代了http數(shù)據(jù)請(qǐng)求方式，該技術(shù)對(duì)數(shù)據(jù)獲取效率更高，從而提升數(shù)據(jù)獲取即時(shí)性，也保證了多端互動(dòng)的擴(kuò)展性；

（2）采用基于MVVM模式的低耦合代碼開(kāi)發(fā)方式，MVVM架構(gòu)中，WEB播放器的顯示控件組件數(shù)據(jù)模型與視圖分離，保證了WEB播放器代碼層可靠的渲染性能以及強(qiáng)大的可重用性；

除此之外，MVVM提供的效率渲染速度，降低了WEB瀏覽器渲染可視化圖形的單位時(shí)間和所消耗性能，讓用戶(hù)有更多的性能來(lái)支撐其設(shè)計(jì)的實(shí)現(xiàn)；

采用Vue + ES6 + Echart + 組件化這樣的技術(shù)棧組合；組件化后，只需要對(duì)顯示控件組件進(jìn)行維護(hù)，不會(huì)影響到其它文件；而且文件結(jié)構(gòu)清楚，方便開(kāi)發(fā)人員對(duì)代碼的后續(xù)維護(hù)及更新迭代；

采用塊狀化結(jié)構(gòu)，一個(gè)顯示控件組件一個(gè)標(biāo)識(shí)，標(biāo)識(shí)加元素標(biāo)簽定位書(shū)寫(xiě)css，減少了代碼中大量的class樣式定義，減少了代碼的體積；

（3）將所有的數(shù)據(jù)圖表類(lèi)型控件編碼使之為一個(gè)總組件，分別將柱狀圖、折線(xiàn)圖、泡泡圖這樣的單獨(dú)數(shù)據(jù)圖表分別獨(dú)立編碼為一個(gè)個(gè)的小組件；

當(dāng)用戶(hù)希望只用柱狀圖展示數(shù)據(jù)時(shí)，WEB播放器只會(huì)調(diào)用柱狀圖組件，不會(huì)計(jì)算其他小組件的代碼，省去大量計(jì)算時(shí)間；

當(dāng)用戶(hù)希望使用柱狀圖及折線(xiàn)圖時(shí)，WEB播放器會(huì)調(diào)用相應(yīng)的兩個(gè)小組件進(jìn)行計(jì)算；

當(dāng)用戶(hù)希望在一個(gè)圖表里面使用折線(xiàn)圖及柱狀圖或者其他的數(shù)據(jù)圖表展示組合數(shù)據(jù)，會(huì)將使用到的小組件調(diào)配集中到一個(gè)總組件中進(jìn)行計(jì)算和展示；

總組件套小組件以及組件之間靈活的串并聯(lián)，使代碼擴(kuò)展更加快速高效；

（4）實(shí)時(shí)數(shù)據(jù)在web應(yīng)用中的自定義可視化展示方法的核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，讓數(shù)據(jù)源與 DOM 保持同步非常簡(jiǎn)單高效；在傳統(tǒng)使用 jQuery 手工操作 DOM 時(shí)，代碼是命令式的、重復(fù)的與易錯(cuò)的；通俗地講，意味著在普通 HTML 模板中將 DOM “綁定”到底層數(shù)據(jù)；一旦創(chuàng)建了綁定，DOM 將與綁定的數(shù)據(jù)源保持同步；每當(dāng)修改了數(shù)據(jù)源，DOM 便相應(yīng)地更新；這樣，應(yīng)用中的邏輯就幾乎都是直接修改數(shù)據(jù)源了，不必與 DOM 更新攪在一起；這讓代碼更容易撰寫(xiě)、理解與維護(hù)；DOM可理解為顯示控制組件；

（5）WEB播放器從代碼層解決了數(shù)據(jù)源與視圖的關(guān)聯(lián)問(wèn)題，從而用戶(hù)只需要關(guān)注數(shù)據(jù)可視化效果層的設(shè)計(jì)與自定義，不需要做更多數(shù)據(jù)層及代碼層的學(xué)習(xí)與開(kāi)發(fā)；用戶(hù)只需用數(shù)據(jù)源對(duì)應(yīng)顯示控件和拖動(dòng)或選擇顯示控件的展示效果，不需要進(jìn)行代碼級(jí)開(kāi)發(fā)和調(diào)試；

（6）支持4k分辨率圖表在每秒50000條數(shù)據(jù)推送壓力下渲染50-100個(gè)用戶(hù)自定義圖表，改變了用戶(hù)對(duì)數(shù)據(jù)可視化的需求上限；

因此，實(shí)時(shí)數(shù)據(jù)在web應(yīng)用中的自定義可視化展示方法，通過(guò)WEB播放器將重構(gòu)的對(duì)顯示控件組件與數(shù)據(jù)源綁定，當(dāng)數(shù)據(jù)源數(shù)據(jù)動(dòng)態(tài)變化時(shí)，只需要對(duì)顯示控件組件進(jìn)行渲染，即可實(shí)現(xiàn)以圖表方式實(shí)時(shí)動(dòng)態(tài)顯示數(shù)據(jù)，而不需要頻繁構(gòu)造對(duì)應(yīng)的顯示控制，從而提高了數(shù)據(jù)動(dòng)態(tài)可視化顯示的效率。