本文從技術和工具的角度分享可視化大屏的開發(fā)甚脉!
主要是對報表工具開發(fā)可視化大屏做測評丸升!
可視化大屏開發(fā)工具選擇
常規(guī)的數(shù)據(jù)可視化方式我們可以選擇直接讀取數(shù)據(jù)庫,通過繪圖軟件/庫進行繪制牺氨,最終構成自建的前端顯示效果狡耻,比如使用 Apache ECharts (incubating)?等工具。
除此以外猴凹,追求效率的我們還可以選擇成熟的報表套件夷狰,這類套件往往具有一系列的圖表模板+支持推拽且可視化的配置頁面,方便我們快速的構建出可視化大屏郊霎。其實大部分套件的機理差異并不大沼头,為了降低文章內容量,本文直接講解某一種套件,
當然報表套件又分為三類:
桌面應用產(chǎn)品进倍,生成的是桌面端程序土至,程序往往直接連接云端數(shù)據(jù)庫,需要數(shù)據(jù)庫開放公網(wǎng) ip猾昆。也有部分會有服務端提供 crud api 來降低數(shù)據(jù)泄露風險
web 端直連數(shù)據(jù)庫 / 自建后端產(chǎn)品陶因,這種產(chǎn)品較少,畢竟已經(jīng)做到 web 了再配個服務器豈不是更好垂蜗,否則還是要數(shù)據(jù)庫開放 ip
B-S 產(chǎn)品楷扬,服務端提供與多源數(shù)據(jù)庫的連接、數(shù)據(jù)提取么抗、前端頁面生成毅否,前端負責顯示、用戶交互與動態(tài)刷新等等
本文選擇第三類的一款套件作為講解 -- 帆軟的 FineReport蝇刀,選擇此產(chǎn)品原因:
1螟加、國產(chǎn)軟件,中文文檔吞琐、中文配置界面捆探,對于國內用戶友好度高
2、國內基本最領先的報表工具站粟,可視化大屏開發(fā)成熟
(注:我盡量從可視化報表工具的角度出發(fā)描述黍图,而不是針對某個具體的產(chǎn)品,只是為了形象且可查證會給出 FineReport 在下面各方面的實踐方式 / 方案奴烙,不作任何額外評價)
既然是個套件應該有很多完整成熟的功能助被,我們以這幾個維度來聊聊:
環(huán)境與基礎設施:設計平臺,安裝環(huán)境切诀,故障傳遞與追溯揩环,數(shù)據(jù)安全,協(xié)作開發(fā)幅虑,功能擴展性
視覺效果與用戶交互:布局丰滑,配色,交互倒庵,可復用組件褒墨,組件自定義
設計平臺
首先說說設計平臺,一般分為兩類類:
傳統(tǒng)的桌面應用的設計器擎宝,前者往往直接安裝打開使用即可郁妈,對于 B/S 類的產(chǎn)品,往往設計器安裝包會自帶一個服務在啟動后自動運行可用于調試的服務環(huán)境
基于 Web 的設計器绍申,這種設計器有些是支持同時設計與提供展示服務的噩咪,即一次搭建后根據(jù)登錄賬號的 role 進入不同的環(huán)境锄奢,有些是完全分離的兩套環(huán)境。
FineReport 屬于前者剧腻,對于不同系統(tǒng)均由輕松安裝的安裝包拘央,不需要復雜配置。
安裝環(huán)境
對于 B/S 產(chǎn)品书在,和搭建后端類似灰伟,只是不需要復雜的配置了,直接根據(jù)教程安裝一下就即可啟動服務.
對于后續(xù)要說的功能擴展性儒旬,可能會影響此步驟栏账,如果產(chǎn)品具有功能擴展性,那么額外擴展的功能需要單獨部署在服務上并配置相關連接栈源,如果是基于插件化的擴展需要在服務端安裝對應插件挡爵。此部分建議構建完整的環(huán)境搭建文檔,如果產(chǎn)品可以通過腳本安裝甚垦,建議直接將部署過程腳本化茶鹃。
FineReport 環(huán)境安裝也是安裝包直接搞定,其具有插件平臺艰亮,若有補充插件需要通過 web 登錄后添加對應插件闭翩。
故障傳遞與追溯
企業(yè)數(shù)據(jù)應用階段,往往數(shù)據(jù)可視化以后就逐漸地產(chǎn)生了可視化大屏迄埃×圃希可視化大屏往往單頁面信息含量極其豐富、跨越的業(yè)務部門繁多侄非、數(shù)據(jù)分析維度全面蕉汪。所以從技術角度來講,我們需要保證單一故障不會大面積的波及其他信息逞怨,比如:
設計器出現(xiàn)故障是否會影響服務端者疤?尤其是通過 role 區(qū)分環(huán)境的 web 設計器。
個別指標的計算錯誤是否會導致同頁面其他指標均無法顯示骇钦?
個別指標計算緩慢是否影響同頁面其他指標均無法刷新宛渐?
對于故障還有額外要做的是實時處理方式:
關鍵指標計算錯誤是否也要報警竞漾?因為可視化大屏運行狀態(tài)也許也是一個指標呢
指標計算錯誤時顯示 0 還是現(xiàn)實錯誤信息眯搭?尤其注意在指標具有其獨特的存在性意義時,不建議隨意的用同類型數(shù)據(jù)作為展示业岁,避免錯誤統(tǒng)計
雖然我們保證了故障波及的可控性鳞仙,但我們還希望能夠追溯到問題產(chǎn)生的原因,這就需要確定相關產(chǎn)品是否有足夠的日志笔时,尤其是需要在于數(shù)據(jù)庫交互式的執(zhí)行語句與執(zhí)行響應棍好。
繼續(xù)說 FineReport的情況:
報表單一指標計算錯誤不會影響其他指標顯示。
單一指標計算速度慢不會影響整體打開速度,會逐步更新算的指標值借笙,但初始打開時計算過程中未算得結果的在頁面布局上有一定概率不正確扒怖,此問題會逐步計算后動態(tài)的調整布局,最終效果正確业稼。
設計調試階段有完整執(zhí)行日志盗痒,可查詢執(zhí)行的 sql 指令追溯計算錯誤問題,但對于復雜多層嵌套/頁面聯(lián)動等行為追溯相對復雜可考慮開發(fā)日志處理工具
生產(chǎn)環(huán)境(服務器版)部署后的日志并未調研
數(shù)據(jù)安全
理想狀態(tài)下低散,我們的數(shù)據(jù)庫不應該使用公網(wǎng) IP俯邓,這方面針對前面提到的三種類型:
桌面應用程序:此類程序往往也支持不直接連接數(shù)據(jù)庫,可以通過自建的后端或套件的后端來獲取數(shù)據(jù)熔号。
web 直連產(chǎn)品:此類產(chǎn)品只提供了基于 Web 的 UI 快速搭建稽鞭,類似于后臺框架等等,具體的數(shù)據(jù)讀取方式可以選擇 API or 直連數(shù)據(jù)庫引镊,需要自行維護數(shù)據(jù)安全朦蕴。
B-S 產(chǎn)品:此類型產(chǎn)品完整的提供了前后端,后端負責和多源數(shù)據(jù)庫的連接弟头,前端只負責接受數(shù)據(jù)梦重、傳遞指令,相對可以更好地保護數(shù)據(jù)庫安全亮瓷,只需要將服務端與數(shù)據(jù)庫放到同一云供應商琴拧,避免開啟公網(wǎng) IP 即可。但同樣的風險轉嫁到了此類型產(chǎn)品的后端嘱支,無論是后端服務還是此產(chǎn)品提供的基于 Web 的后臺蚓胸。
FineReport作為 B/S 產(chǎn)品,有完整的服務端除师,前后端交互在數(shù)據(jù)方面一般以 POST 請求沛膳。
簡單查看:請求參數(shù)是控件 id、控件內容汛聚、行為等锹安,不會涉及到要執(zhí)行的 sql。返回結果為控件信息及控件內數(shù)據(jù)倚舀。不確定是否有遺漏的情況叹哭,再加上使用 SSL 可進一步提高安全性。
協(xié)作開發(fā)
報表并不是一件簡單的事情痕貌,無論是經(jīng)過數(shù)倉的手段還是數(shù)據(jù)中臺的手段风罩,從業(yè)務角度來看,我們都是先打破了部門壁壘舵稠,然后讓各部門數(shù)據(jù)相互碰撞超升,挖掘出更多的剩余價值入宦,這就導致了我們報表業(yè)務的復雜性以及開發(fā)的工作量,我們不得不進行協(xié)作開發(fā)室琢,尤其是可視化大屏乾闰。
一個可視化大屏可能有幾十個模塊,每個模塊有三五個甚至更多一些的分析指標盈滴,一個頁面上輕松可以出現(xiàn)過百的指標汹忠,因此能夠讓開發(fā)過程可協(xié)作是極其重要的環(huán)節(jié)。
首先對于協(xié)作我們需要考慮下面幾個問題:
協(xié)作過程數(shù)據(jù)庫如何連接:由于數(shù)據(jù)庫在云上雹熬,為了安全也不會開放對外接口宽菜,此時推薦三種方式:① 使用 QA 環(huán)境,如果 QA 環(huán)境已經(jīng)積攢了足夠多的虛假數(shù)據(jù)且對數(shù)據(jù)結構安全性并不敏感竿报,可考慮此方案铅乡,但不太推薦。② 使用VPN烈菌,讓我們能夠在本地經(jīng)過 VPN 連上數(shù)據(jù)庫阵幸。③ 使用云服務器,通過云上開發(fā)來實現(xiàn)在內網(wǎng)訪問數(shù)據(jù)庫芽世。
單一頁面分工開發(fā)方法:一個頁面過百指標數(shù)量挚赊,根據(jù)業(yè)務內容進行一定分組安排任務,但同時要考慮如何此工具的記錄文件是否能夠自動 merge济瓢,如果不能自動 merge 如何進行人工 merge荠割,merge 時能否正常的保留邏輯以及布局等信息……
重復性樣式是否可方便復用:當樣式重復只是邏輯和標題/標簽差異時,是否能復用旺矾,是否有模板的概念蔑鹦,復用后是否能保證只是邏輯改變其他具有完全一致性以保證風格統(tǒng)一
……
FineReport支持通過更改工作目錄為遠端的工作目錄的方式,直接開始協(xié)作開發(fā)箕宙,此方式只是將設計文件的存儲位置放到了遠端嚎朽,真正操作執(zhí)行等還是在本地,類似于一個設計文件版本管理器柬帕。
功能擴展性
產(chǎn)品是否提供了模塊化 or 插件化平臺哟忍,以通過公開流程關鍵節(jié)點的接口或其他方式來支持第三方插件、自定義組件的接入陷寝,來實現(xiàn)“無限可能”的未來锅很。
插件包括但不限于:
更多地圖表模板
用戶交互過程更多的動畫效果
花式提示框
設計階段布局工具
運行階段日志處理工具
整體的配色方案(皮膚? 主題?)
自定義計算模板/公式、領域專業(yè)公式集
鑒權認證插件
數(shù)據(jù)庫驅動
……
FineReport有插件平臺盼铁,包含多種分類分組粗蔚,有官方插件及第三方插件尝偎,且有插件開發(fā) API 文檔
布局與配色
是否有整體的配色方案饶火?便于在不追求高度定制的情況下快速成型鹏控,比如夜間模式……
設計階段是否能進行規(guī)范的布局:水平、垂直肤寝、柵格当辐、流、填表專用(label+editbox)……
圖層鲤看、透明度缘揪、可見性、盒模型
特效方面是否可控制事件流
響應式布局
FineReport布局上可以選擇絕對布局(一切靠手拖拽)义桂,或者選擇自適應布局找筝,其可以配置雙向單項(水平、垂直慷吊、柵格)同時可配置內邊距與組件間邊距袖裕。
交互
圖自動刷新
圖表聯(lián)動
參數(shù)配置聯(lián)動
動畫效果
提示窗口
可復用組件
可復用性也直接或間接地影響到了協(xié)作開發(fā)的效率、最終展示效果一致性等多方面溉瓶。
FineReport提供了網(wǎng)頁插件急鳄,可通過插入網(wǎng)頁控件來引用其他的組件,以嵌套的方式組合多種顯示塊堰酿。
還提供了模板插件疾宏,通過將選中的多個組件打包成一個模板,同時打包了組件間布局關系触创、數(shù)據(jù)操作邏輯坎藐,實現(xiàn)了邏輯、關系與控件的整體遷移復用哼绑,但其只能記憶布局關系顺饮,無法記憶布局最終尺寸,在多次復用后需要調整整體的尺寸問題凌那。
組件自定義
此類型工具是通過將多種常用功能進行持久化的方式提高開發(fā)效率兼雄,但難免遇到特殊的需要,這時候就需要高度的自由行帽蝶,比如提供插件平臺赦肋、組件設計方式、API 接口励稳、可編程……
FineReport提供了對 JS 的支持佃乘,可以在很多空間里在點擊等操作時觸發(fā)對應的 JS 腳本,后面就看開發(fā)自己的了驹尼。
同時有插件平臺趣避,可將重復使用的功能通過插件的方式持久化,有模板插件新翎,可將重復的組件/組件集進行持久化程帕。