大屏數據可視化易用工具的研究與開發①

王薈奧,蔡永香,楊岸霖,游小玲,何宗宜

(長江大學 地球科學學院,武漢 430100)

1 概述

大屏數據可視化是以大屏為主要展示載體進行數據的可視化呈現.隨著大數據分析技術的流行,行業應用中進行數據分析及大屏可視化展示以提供決策支持的需求日益迫切.國內外許多互聯網公司都有很多有用的可視化實踐,以D3.js為例,其由Mike Bostock和斯坦福可視化組的Jeff Heer 制作,而以此為基礎開發的可視化工具舉不勝舉,如Data.js、RAWGraphs 等[1].

隨著可視化的需求越來越大,出現了一些商業性可視化組件庫,如阿里巴巴旗下的DataV 是專業級大數據可視化工具,有圖形化編輯界面,支持多種數據源,能靈活部署及發布等,但免費版本的功能受限,商業應用的費用也很高.也有一些開源性可視化組件庫,如百度旗下的Echarts,有著豐富的可視化類型,能進行深度的交互式數據探索,支持多維數據、動態數據等,有著豐富的視覺編碼手段,但必須通過程序編碼進行定制開發.

由于系統數據類型、分析需求各不相同,可視化表達的內容及方式不同,定制開發實現成本較高、運維管理復雜.如果能建成一個數據易用可視化工具,能借助可視化組件,基于數據面板配置管理數據,快速實現數據可視化,就能夠大大節省成本,提高工作效率.

本文從方便實用角度出發,著重開發出一個拖拽式大屏數據可視化工具,使用數據連接面板、可視化組件庫、場景模板以及發布工具,通過對可視化組件的拖拽式操作,讓沒有編程基礎的人也能快速的將數據可視化,做出高大上的可視化應用.

該工具命名因研究辦公室名為C317,該工具主要特點是數據可視化頁面,數據的英文是Data,可視化頁面用UI 表示,所以取名為C317DataUI.

2 系統統架構與開發技術

2.1 系統整體架構

本系統采用B/S 結構[2],在該結構的基礎上將系統分為3 層:數據層、服務層、表現層,如圖1所示.

圖1 系統3 層架構圖

(1)數據層

數據層主要的功能是給服務層中的業務邏輯提供各種類型的數據支持,它的主要任務是數據存儲與管理,并將數據傳遞給上層的業務邏輯層進行處理.

(2)服務層

服務層是處于應用程序數據層和表現層之間.服務層隱藏了業務邏輯層的細節,在內部組織業務微服務,采用封裝和接口的形式,提供粗粒度、面向表現層的服務.系統所有的交互都是從表現層進入.

(3)表現層

表現層位于3 層架構的最上層,它是直接與客戶端交互的一層.它負責接收客戶端的請求,解析客戶端的請求,獲取數據后,再返回給客戶端,進而完成了一層數據請求[3].

2.2 主要開發技術

考慮到要建成可視化工具C317DataUI的先進性與科學性,我們采用了成熟的前后臺框架與技術來開發.前端采用Vue.js 框架、Element 組件庫;后端采用Koa 框架實現系統服務,Spring Boot 框架實現多源數據連接Web 服務,采用JSON 格式進行數據傳輸,提高數據傳輸效率.

Vue.js 是目前流行的創建界面的漸進式前端框架.它完全能夠驅動使用Vue 生態系統支持的單個文件組件和庫開發的復雜單頁應用程序[4],而Vuex 是一個專為Vue.js 應用程序開發的狀態管理模式.它采用集中式存儲管理應用的所有組件的狀態,并以相應的規則保證狀態以一種可預測的方式發生變化[5].Element 是一套開源的組件庫,旨在快速搭建頁面,并提供了配套的設計資源,能充分滿足可定制化的需求.

Koa 是一個新的后端框架,它沒有捆綁任何中間件,而是提供了一套優雅的方法,讓開發者能快速而愉快地編寫服務端應用程序[6].Spring Boot 不需要進行繁瑣的定義配置,而是使用一種自動配置方式,目前已成為快速應用程序開發的領導者.

3 關鍵問題及解決方案

設計構建可視化工具C317DataUI的目的是實現數據快捷可視化,減少用戶開發工作量,按照簡單易用的原則進行軟件開發.主要實現的功能需求有:可視化組件調用、配置、布局;頁面編輯與發布,模板的發布、使用、編輯;多源數據的上傳、管理與連接,以及用戶信息的管理等功能.其中涉及到的關鍵問題主要包括以下兩個方面.

(1)多源數據配置問題

為了讓C317DataUI 簡單易用,設計采用傻瓜式的配置數據方式,不需編寫代碼,就能靈活處理不同數據源,支持MySQL、SQL Server 等常見關系型數據庫,讓需要表達的數據能靈活與可視化組件連接.并且在交互過程中,能對圖表中的數據進行聯動修改,而如何連接、統一處理不同來源的數據是解決問題的關鍵.

我們的策略是將所有數據連接并存儲到MongoDB數據庫,然后轉換成一種公共的數據格式來可視化表達,這樣就只需要對公共格式數據的可視化表達編寫代碼實現即可,可以提高代碼的復用性.此外,對公共數據表設置監聽,當數據表被修改后,用代碼實現源數據的聯動更新.

(2)可視化組件配置問題

同樣,為了讓C317DataUI 簡單易用,我們設計對可視化組件采用拖拽式布局,自動生成頁面代碼.由于每個可視化組件都有許多的屬性,如顏色、位置、大小、數據綁定、字體等,且組件不同,屬性的個數和類別也有所不同,如何在盡可能降低代碼量的情況下,實現屬性快速配置并自動生成頁面代碼是解決問題的關鍵.

我們采用分類處理的策略,即按屬性性質對屬性進行分類,分為通用屬性和個性化屬性,并分開編碼,開發出不同屬性的配置組件.可視化組件屬性配置時,通過調用相應的配置組件,從其接口獲得配置參數來完成,從而減少編碼的工作量.

4 系統總體設計與實現

4.1 功能模塊設計

考慮到用戶可視化的需求及軟件的簡單易用,按照系統功能類別我們將系統劃分為我的作品、創意模板、數據管理和用戶管理4 個大的功能模塊,其中每個大功能模塊由幾個小的功能模塊組成,如圖2所示.

圖2 系統功能模塊圖

4.2 數據庫設計

C317DataUI 選取了當下流行的MongoDB 數據庫來進行數據的存取與管理.

MongoDB 是一個基于分布式文件存儲的數據庫,是非關系數據庫當中功能最豐富,最像關系數據庫的數據庫[7].考慮到C317DataUI為Web 端工程,對數據存取的速度要求較高,且由于數據源多樣,有不同的數據庫數據,有Excel 表格數據等,因此對數據庫的可擴展性要求高,MongoDB 數據庫以其巨大的優勢能夠勝任本項目的各項需求.

(1)具體結構設計

本數據庫按照項目實際需求定義了5 個集合分別是用戶集合(user)、圖片集合(images)、頁面集合(pages)、數據集合(data)、數據庫連接信息集合(jdbc).

其中用戶集合(user) 存儲用戶注冊的相關信息.當用戶登錄時,將按用戶輸入的用戶名和密碼與用戶集合中的數據進行對比驗證,實現用戶登錄等功能.圖片集合(images)主要存儲用戶上傳的圖片數據.頁面集合(pages)是最重要且最復雜的集合,存儲頁面中所有信息,例如在編輯器中添加的組件相關信息:大小、位置、圖表標題等,一條記錄代表一個頁面.數據集合(data)主要存儲上傳的數據信息,這些數據與可視化組件進行數據綁定后就能進行可視化顯示.數據庫連接信息集合(jdbc)負責記錄多源數據庫信息的存儲,如數據庫類型、名稱、IP 地址、端口號、用戶名、密碼等相關信息.

4.3 主要功能實現

(1)多源數據配置

多源數據配置主要分為數據連接與存儲、數據轉換與綁定、數據監聽與更新3 個部分,如圖3所示.

圖3 多源數據配置

1)數據連接與存儲

多源可視化數據主要分為Excel 數據和不同種類的數據庫數據兩大類.其中Excel 數據,通過Excel 插件(x-data-spreadsheet)實現本地Excel 文件的連接與讀取,然后調用數據存儲接口存儲在MongoDB 數據庫中,供可視化組件使用.

數據庫數據使用JDBC 進行連接,并用查詢語句遍歷數據庫,將連接信息與數據集存儲在MongoDB 數據庫中,目前已經支持的關系型數據庫有MySQL、Oracle、PostgreSQL、SQL Server 等.針對不同的數據庫,需要單獨創建一個以JDBC 連接數據庫的程序,下面以連接MySQL 數據庫為例來進行說明.

首先采用forName 方法將Driver 類的實例注冊到DriverManager 類中來加載JDBC 驅動程序,然后創建數據庫的連接獲得Connection 對象,使用Driver-Manager的getConnectin 方法傳入數據庫的路徑、用戶名和密碼;再通過executeQuery 方法來查詢數據庫,返回結果集ResultSet,最后遍歷結果集得到數據庫數據存入MongoDB 數據庫中.

2)數據轉換與綁定

從MongoDB 數據庫中讀取需要可視化表達的數據,利用格式轉換函數將其轉化為一種公共數據格式,如格式1 所示.將其與可視化組件的數據源綁定,即可實現數據的可視化顯示.

格式1.公共數據格式columns:[“日期”“訪問用戶”“下單用戶”“下單率”],rows:[{日期:“1/1”,訪問用戶:1 393,下單用戶:1 093,下單率:0.32 },{日期:“1/2”,訪問用戶:3 530,下單用戶:3 230,下單率:0.26 }]

3)數據監聽與更新

對公共格式數據設置數據監聽,當數據發生改變時,與公共格式數據綁定的可視化圖表也會發生相應的改變.需要同步更新數據源時,代碼修改MongoDB數據庫中對應的數據庫.此時,實現數據監聽采用的是Vue.js 中的watch 函數,起監聽數據變化的作用.

(2)可視化組件配置

可視化組件配置主要包括組件屬性分類、分類后屬性配置、頁面發布與生成3 個部分.

1)組件屬性分類

Echarts的可視化組件是通過JSON 格式的數據項實現屬性配置,不同的組件其配置項大同小異,我們把相同的屬性配置分為同一類來實現,如折線圖、柱狀圖、K 線圖等,這一類圖表都同樣具有X、Y 軸,因此把X、Y 軸屬性配置分為一類;所有圖表都有圖形樣式屬性“itemStyle”,包括圖形顏色、圖形類型、描邊顏色、描邊寬度、描邊類型、陰影顏色、透明度等,將其分為一類;每一類進行組件式開發實現,分別稱之為XY 配置組件、圖形樣式配置組件等,并提供傳輸參數的接口.在對具有X、Y 軸屬性這類圖表組件進行配置時,通過連接XY 配置組件,獲取組件的接口數據來實現屬性的配置;對圖形樣式修改時亦如此,連接圖形樣式配置組件,獲取組件的接口數據來實現樣式配置.

2)分類后屬性配置

Vue 官方文檔中,組件式開發中props 變量用來實現可視化圖表組件與配置組件之間參數的傳遞.可視化圖表組件屬性配置時采用JSON 數據格式,使用props 變量在對應配置組件接口處接收數據,實現參數的傳遞.當配置組件接口數據被修改,接收數據的可視化組件屬性配置相應被修改,可視化圖表也會發生相應的變化,最終所有配置數據存入MongoDB 數據庫中.

如圖4所示,可視化組件1 有A、B 類屬性需要配置,可視化組件2 有B、C 類屬性需要配置,屬性被分成了配置組件A、配置組件B和配置組件C 三類,通過組件式開發實現.可視化組件1 配置屬性時,通過props 分別連接配置組件A和配置組件B,獲取接口數據實現屬性配置;可視化組件2 配置屬性時,通過props分別連接配置組件B和配置組件C,獲取接口數據實現屬性配置,這樣大大提高了代碼的復用性,不用每一個可視化組件配置時都單獨實現一次.

圖4 屬性配置原理圖

3)頁面生成與發布

用戶按UI 設計將布局好的可視化組件配置后,根據id 從MongoDB 數據庫中讀取頁面的JSON 數據,數據包含可視化圖表組件的名稱、位置、樣式、數據等;利用Vue的動態組件特性,即,name為圖表組件的名稱,根據name的值顯示對應組件到頁面上[8],實現頁面的生成.

使用Vue Router 實現新頁面的發布,它是Vue 官方提供的路由管理器,適合于構建單頁Web 應用,開發人員需要做的是將組件映射到路由,然后告訴路由渲染頁面的規則[9].該工具中發布頁面路徑格式一般為“http://localhost/editor?id”,其中id為編輯頁面的唯一標識,從而實現不同頁面的發布.

4.4 系統成果展示

可視化工具C317DataUI 開發完成后,這里對部分頁面進行成果展示.

進入系統后,系統默認打開系統首頁,點擊新建頁面跳轉到編輯頁面.

(1)組件調用與屬性配置

進入系統編輯頁面后,左邊是組件列表,點擊所要調用的組件,組件就會出現在中間畫布上;在畫布上的組件可以通過鼠標點擊拖拽組件改變其位置和大小;右側為組件屬性編輯,可以對組件進行樣式編輯、數據綁定,如圖5所示.

圖5 組件調用與編輯界面

(2)多源數據連接頁面

數據分為文件數據和數據庫數據,其中文件數據包括圖片數據和表格數據.表格數據上傳時點擊“ 導入excel” 按鈕,圖片數據上傳時點擊“點擊上傳” 按鈕打開本地文件夾進行上傳;而數據庫數據通過連接數據庫進行導入,點擊“ 連接數據庫” 按鈕進行數據庫的配置和連接,如圖6所示.

圖6 多源數據連接界面

(3)創意模板頁面

C317DataUI 提供了一些創意模板,方便用戶參考、使用.用戶可以預覽和使用模板.將鼠標移到作品上方會出現預覽按鈕,點擊預覽就可以查看當前選中的模板.點擊使用模板按鈕就可以使用該模板并進入作品編輯頁面.

5 結論與展望

本文基于Vue 框架、Echarts 可視化庫實現了數據可視化易用工具C317DataUI,旨在降低成本、提高效率快速實現數據可視化的應用表達.利用工具,能通過簡單拖拽操作實現可視化頁面布局,使用配置面板快速配置可視化組件;無需編寫代碼,采用傻瓜式的數據配置方式連接多源數據實現數據快速綁定.該工具適用于有大數據可視化需求的各個領域,如大宗商品行業交易數據可視化、設備運維管理數據可視化、人員檔案管理數據可視化等,也可以應用在大型企業的數據報表中,公共疫情分布展示中等,以及其他與我們的生活息息相關各種場景數據可視化表達中.