如何開發(fā)可視化大屏娶聘?報表自動化是最優(yōu)選擇!

本文從技術和工具的角度分享可視化大屏的開發(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ā)自己的了驹尼。

同時有插件平臺趣避,可將重復使用的功能通過插件的方式持久化,有模板插件新翎,可將重復的組件/組件集進行持久化程帕。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末住练,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子愁拭,更是在濱河造成了極大的恐慌讲逛,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件岭埠,死亡現(xiàn)場離奇詭異盏混,居然都是意外死亡,警方通過查閱死者的電腦和手機惜论,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進店門许赃,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人馆类,你說我怎么就攤上這事图焰。” “怎么了蹦掐?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵庵楷,是天一觀的道長琳状。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么夯尽? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任缕贡,我火速辦了婚禮效览,結果婚禮上双仍,老公的妹妹穿的比我還像新娘。我一直安慰自己泳秀,他們只是感情好标沪,可當我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著嗜傅,像睡著了一般金句。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上吕嘀,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天违寞,我揣著相機與錄音,去河邊找鬼偶房。 笑死趁曼,一個胖子當著我的面吹牛,可吹牛的內容都是我干的棕洋。 我是一名探鬼主播挡闰,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了摄悯?” 一聲冷哼從身側響起赞季,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎射众,沒想到半個月后碟摆,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體晃财,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡叨橱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了断盛。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片罗洗。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖钢猛,靈堂內的尸體忽然破棺而出伙菜,到底是詐尸還是另有隱情,我是刑警寧澤命迈,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布贩绕,位于F島的核電站,受9級特大地震影響壶愤,放射性物質發(fā)生泄漏淑倾。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一征椒、第九天 我趴在偏房一處隱蔽的房頂上張望娇哆。 院中可真熱鬧,春花似錦勃救、人聲如沸碍讨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽勃黍。三九已至,卻和暖如春晕讲,著一層夾襖步出監(jiān)牢的瞬間溉躲,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工益兄, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留锻梳,地道東北人。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓净捅,卻偏偏與公主長得像疑枯,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子蛔六,可洞房花燭夜當晚...
    茶點故事閱讀 42,916評論 2 344

推薦閱讀更多精彩內容