基于動態可配置的數據可視化展示系統

王萍

摘要 為了更好的幫助人們利用數據資源，洞察數據的真正含義，從而幫助人們分析商業模式的有效性、市場的發展趨勢、信息化建設的成效、安全風險態勢等，數據可視化系統成為必不可少的工具。各種數據中心、展示中心、監控中心、應急響應中心都需要通過大屏幕對數據進行呈現。為了提升可視化系統的靈活性、擴展性，本文闡述了一套支持靈活拖拽布局，數據可動態配置的系統實現方案。

【關鍵詞】數據可視化 動態配置 可擴展

隨著大數據技術的快速發展，各行業越來越多的通過數據分析的方法來進行態勢的監控和預測，而抽象的數據結果不利于人們的理解，因此需要通過各種統計圖表、動態地圖等方式來展示數據背后的價值，最后通過監控展示大屏將結果呈現給用戶。作為一種通用的數據可視化系統工具，需要滿足不同行業、不同類型數據的可視化展示需求，并且展示的內容還需要根據使用數據的人員角色不同適應靈活的變化，因此就需要系統的設計滿足不同風格、不同布局、不同數據源的靈活配置，以減少因為需求變化而引發的定制開發。

1 術語定義

可視化組件：可視化組件包括文字組件、圖形化組件兩種類型。文字組件顯示獨立的數字、文本，圖形化組件是能夠反映一組數據結果的獨立的餅圖、柱狀圖、曲線圖、儀表圖、地圖等。

視圖模板：視圖模板是指帶有一定樣式風格，定義了展示分辨率，布局劃分的展示框架。

視圖：視圖是一個完整的可瀏覽的監控頁面，由多個文字組件和圖形化組件和數據結合，呈現給用戶最終的展示結果。

屏幕：展示大屏，由多塊顯示屏拼接而成，多塊顯示屏可以進行拆分接收多路輸入。

2 設計思想

低耦合：系統采用低耦合設計原則，通過分層的系統架構設計將頁面和組件分離、組件和數據分離。

可復用：系統通過抽象化的設計，通過模板化、組件化實現功能可復用。

可配置：系統通過視圖配置、數據源配置、組件參數配置等策略的設置來提升系統使用的靈活性。

可擴展：系統通過標準接口的定義，可插裝的構件設計滿足對新需求的擴展性。

易用性：系統通過可視化的配置，可拖拽的操作提升用戶與系統交互過程的易用性。

3 系統設計

3.1 系統架構

本系統采用分層的架構設計，分為屏幕層、視圖層、組件層、接口層、和數據服務層。

3.1.1 屏幕層

屏幕層對應真實的物理屏幕，屏幕層可以通過url的配置進行與視圖的映射。根據實際的使用場景可以將屏幕映射到一個視圖進行整體展示，也可以將大屏拆分成多個子屏幕映射到不同的視圖url，且屏幕展示的內容可以根據實際的使用需求進行動態的輪詢切換。

3.1.2 視圖層

視圖層預置了不同風格、適用于不同數據展示的視圖模板，視圖模板將展示頁面拆分成不同的區域，例如標題區、統計計數區、圖表區、列表區等，可以通過拖拽布局、參數編輯的方式將組件拖拽到不同的區域進行視圖配置。

3.1.3 組件層

組件層集成了大量的圖表組件、文字組件、地圖組件、列表組件、以及根據需求定制的其它組件等，這些組件形成組件庫，組件可以進行擴展，將符合接口規范的組件插裝到組件庫中。在視圖配置時可以從組件區選擇適合展示數據結果的組件拖拽到視圖中，組件是組成視圖的基本元素。

3.1.4 接口層

接口層通過標準通訊接口的定義，將組件和數據解耦。將生成組件圖形所需要的數據定義為標準的Json格式，由數據服務層提供數據的獲取和組裝服務，通過Restful接口調用返回給組件進行數據展示。

3.1.5 數據服務層

數據服務層實現數據的獲取、計算和組裝。數據服務層可以適配多種類型的數據源，且適配的接口可以根據數據源的增加進行動態擴展。連接的數據源可以是大數據環境，關系數據庫例如Mysql、Oracle、SqlServer等，Nosql數據庫例如Mongodb、HBase、Redis等，文件如Excel、csv等。數據服務層根據頁面的展示需求對數據進行統計查詢、內存計算，再將計算結果組裝成組件展示需要的Json格式通過服務接口返回給頁面。

3.2 系統主要功能

3.2.1 視圖創建

視圖管理可以創建一個展示視圖實例，視圖包括名稱、描述信息的填寫，為視圖選擇模板，保存后系統進入對該視圖的編輯頁面。

3.2.2 視圖編輯

視圖編輯頁面分為視圖預覽區、組件選擇區、參數配置區，視圖預覽區是根據用戶選擇的模板生成的框架頁面，用戶可以從組件選擇區拖拽組件到視圖預覽區，在視圖預覽區選中一個組件，可以在參數配置區配置數據源，數據源分為接口方式、數據庫連接方式、文本方式等。可以配置數據篩選條件，數據展示的維度，展示參數等。配置好后可以在預覽區看到圖表的生成效果。文本組件支持雙擊進行文字編輯，實時動態刷新的數字顯示可以配置頁面參數接收后臺推送的數據。

3.2.3 視圖管理

視圖管理提供一個列表可以查看所有己創建的視圖，包括視圖創建時間、創建人、視圖實例的名稱、描述、狀態等信息。可以選擇某個視圖進行重新編輯，可以刪除已經創建的視圖。

3.2.4 組件庫

組件庫集成了多種開源的圖表組件，包含常用的餅圖、柱圖、曲線圖、熱力圖、地圖等，系統自身還提供了可自由配置展示列的列表組件，可設置定時器的輪播組件，可嵌入頁面的超鏈接組件，為可視化展示提供更大的靈活性。

3.2.5 用戶管理

用戶管理為每個使用系統的人員創建一個賬號，用戶通過用戶名、密碼方式登錄系統進行功能使用。

3.2.6 權限管理

每個登錄系統的用戶只能查看自己創建的視圖，僅能對自己創建的視圖進行管理操作。

3.3 系統核心數據袁設計

視圖實例表用于存儲用戶創建的視圖實例，視圖表引用關聯的視圖模板，視圖模板表存儲內置的多種樣式和布局的模板初始化數據，視圖與組件實例關系表存放每個視圖引用的組件關聯關系。組件實例表根據不同的組件分類創建了圖表實例表、地圖實例表、文本實例表、表格實例表、連接實例表等，這些實例表存儲了用戶配置的具體的組件展示的參數、映射的數據源、數據篩選條件等。組件元素表存放基礎組件庫，組件類型表存放定義的組件分類，如圖2所示。

3.4 系統接口設計

為了適應多種外部系統作為數據源提供展示數據，系統使用了RESTful API作為第三方系統或本系統后臺提供web服務的標準接口，每個服務端接口提供一個HTTP請求的鏈接，請求返回數據格式使用JSON，JSON是一種輕量級的數據交換格式，可通過頁面腳本語言解析，這樣就可以完成數據結果與頁面組件展示的映射。

為了數據展示的實時性，很多數據是由服務器端實時采集計算生成的，當服務器端有新數據產生時需要立刻推送給展示端進行呈現，例如實時攻擊展示、實時風險變化、實時狀態監控等應用場景，系統采用了WebSocketAPI技術。WebSocker協議是基于TCP的一種新的網絡協議。它實現了瀏覽器與服務器全雙工（full-duplex）通信一一允許服務器主動發送信息給客戶端。

4 結論

本系統實現了一個靈活可配置的數據可視化展示系統，該系統適用于數據中心、安全運營中心、智慧城市監控中心、電商營銷中心等各行業監控大屏的數據可視化展示。本系統設計充分考慮了低耦合性、可復用性、可擴展性、易用性，通過界面的拖拽、參數的配置即可連接到不同的數據源進行圖形化的呈現，為管理決策、控制指揮、實時態勢的掌握提供了易用的工具。本系統目前還未支持通過與圖表組件的交互實現數據詳情的鉆取查看，仍可繼續完善。