在日常項目建設和實施過程中,經常會遇到類似數據可視化的實現場景。對于數據可視化已經從簡單的統計圖表展現,擴展到類似監控大屏,拓撲圖,流程編排圖,集成架構圖等方面的呈現。而這些往往不是簡單的使用圖表就能夠解決的。
因此今天總結下對于數據可視化和圖形繪制方面的工具整理。
數據可視化綜述
推薦首先閱讀知乎的關于有哪些可視化工具推薦的回答,內容已經相當全面了
https://www.zhihu.com/question/19929609
要注意的是當前主流的仍然是基于JAVAsrcirpt開發的圖表庫,對于偏重的flex不應該作為選擇的基礎。下面對一些選擇的思路做些簡單的說明。
首先可選的主流圖表庫包括了百度的Echart,Highchart,D3.js這三個。
這三個可視化圖表庫的使用客戶也相當多,能夠應對的常見可視化場景也足夠。對于百度的Echart又推出有新的V4.0版本,雖然支撐的圖表擴展沒有大的變化,但是在性能上有明顯改進。當然從支持的圖表類型種類和開放性來談,最強大的還是D3.js,但是前面兩種已經能夠基本滿足實際的圖表層面使用的需要。
對于百度Echart,對里面的關系圖做了詳細分析后,實際上沒有找到用來做網絡拓撲圖的工具,系統集成關系圖的組件。當然百度Echart里面有的關系圖,桑基圖,地圖,熱力圖遷徙圖,矩陣圖,日歷圖,樹圖等功能已經足夠強大。
采用百度Echart也很容易自己來實現類似監控大屏這種前端應用。
對于網絡關系圖,在可視化里面常見的一種類型,其中主流的應該是Gephi,Gephi是一款開源免費跨平臺基于JVM的復雜網絡分析軟件, 其主要用于各種網絡和復雜系統,動態和分層圖的交互可視化與探測開源工具。其次是R語言中的iGraph和networkD3包,功能也足夠強大。還有就是基于Python語言實現的networkx,是專門進行網絡可視化呈現的一個小工具。
Gephi地址和例子參考:https://gephi.org/
對于商用的圖表和可視化工具當然是Tableau,據Gartner魔力象限,2014年的測評,tableau可執行速度最快,整體市場表現也在前列。在Tableau官方網站可以免費下載到桌面試用版進行試用。
如果僅僅是提供常用的畫圖API接口,自己完全根據需要繪制SVG渲染圖,對于這種場景你仍然可以選擇Echart和Highcharts來實現,在官方網站也有制作SVG渲染圖的例子。
當然還有一類即經常用于網管類,日志類監控分析的前端圖表展示軟件,在ELK日志分析系統 Logstash+ElasticSearch+Kibana4里面會使用Kibana4進行前端圖表展現。
Grafana是另外一個基于JavaScript的前端展示工具,Grafana provides a powerful and elegant way to create, explore, and share dashboards and data with your team and the world。對于Grafana支持Graphite, Elasticsearch, Prometheus, InfluxDB, OpenTSDB and KairosDB各種數據采集源。
對于Grafana當前和類似InfluxDB時序數據庫結合的很緊密,可以很容易是基于時序數據的可視化圖表展示,包括當前在Kurbernetes里面用的很多的Prometheus監控方案,仍然是基于時序數據庫和Grafana來實現資源性能監控。
Grafana的官方地址:https://grafana.com/
最后說下Processing,功能相當強大,但是要有一定的開發基礎和學習門檻,Processing 在 2001 年誕生于麻省理工學院(MIT)的媒體實驗室,主創者為 Ben Fry 和 Casey Reas,當然還有來自 Carnegie Mellon、洛杉磯的加利福尼亞大學以及邁阿密大學等的貢獻。
具體例子可以參考:https://processing.org/examples/
數據可視化和圖表僅僅是前端呈現的工具,對于數據可視化最重要的還是首先要搞清楚你當前有哪些數據,數據本身的結構和數據間關系是如何的?其次搞清楚數據呈現的場景和模式,其次才是呈現問題。
對IT資源拓撲圖的可視化
對于ESB服務總線,特別是涉及到兩級架構集成的時候,采用類似拓撲圖的可視化思路來進行集成架構和部署架構圖的可視化是一個可選的方案。基于拓撲圖可視化為關鍵字搜索,搜索到兩個可視化工具軟件,雖然都是付費軟件,但是對于拓撲圖,部署架構,集成關系圖等方面的展示能力還是相當強。
TWaver工具:http://www.servasoft.com/
TWaver關注于數據的圖形展示,它是面向開發人員的,需要進行二次開發。
TWaver的圖形組件庫中提供了拓撲組件、地圖組件、設備圖組件,以及表格、樹圖、屬性表、圖表等豐富的通用圖形界面組件,為電信運營支撐系統(OSS)的開發提供“一站式”的組件產品和解決方案,是快速設計、開發和部署OSS的利器。
可以看到TWaver本身的功能相對強大,完全可以勝任復雜的資源拓撲圖的設計,但是如果僅僅用于拓撲圖展示的話有點大材小用。
對于TWaver,實際上可以看到對于數據中心資源和資產的全三維可視化建模是另外一個做的相當好的地方。這個軟件可以實現數據中心內所有設備對象的虛擬仿真,以完全3D模式構建整個數據中心環境,并將數據中心內的監控子系統,如視頻、動環、門禁等,納入到可視化機房管理平臺中來,實時分析查看監控信息。 軟件采用B/S架構,無需安裝任何插件即可在瀏覽器中流暢漫游數據中心三維場景,實現數據中心級、機房級、機柜級、設備級和端口級管理和監控。
類似下圖:
Qunee工具:http://qunee.com/
Qunee是一套基于html5的網絡圖組件。其使用HTML5 Canvas技術,繪制清新、流暢的網絡圖,可用于社交網絡圖、拓撲圖、流程圖、地圖等需求, JS組件封裝,藏繁瑣于簡潔,輕松構建優雅的互聯網應用與企業應用,讓數據的在線可視化變得容易。
在網站上有詳細的例子可以參考,可以看到Qunee相對來說輕量些,用于實現一些簡單的網絡拓撲,集成架構圖展示完全可以滿足去。
類似上圖,可以很方便的通過Qunee提供的可視化設計工具實現。
基于這些可視化拓撲設計工具,結合ESB服務總線集成實際的集成場景來說,初步考慮可以應用的點包括如下。
1. 實現兩級架構的拓撲圖效果展示和接口服務集成監控。
布局原來一直太強調結合地圖進行展示,實際上效果并不一定太好。這里可以直接自己定義布局模式,初步想法就是中心為集團,四邊方框來線上各個省或子公司。形成完整的兩級集團展示效果。這種展示方式也方便直接線上到大屏上去。
2. 對于當前ESB平臺本身的資源和服務狀態監控可視化
這套可視化工具很容易實現這點,我們只需要先可視化的設計出部署架構布局,然后再將實際對數據庫,應用中間件資源,包括服務運行的各種狀態信息,異常信息直接顯示到整體部署邏輯架構圖上即可。這樣可以更加可視化的監控到資源當前的運行狀態和異常發生情況。
3. 服務集成架構展示
在最早我們做自研ESB產品的時候,采用Flash實現了一個集成架構的展示效果,但是整體效果并不是很好。而通過這套可視化工具,可以用來實現這種集成架構的效果展示。同時可以展示出兩級架構的集成效果。即可以分層展開效果。
集成架構不需要提前進行設計,而是需要在后臺提取了集成關系后,自動進行拓撲生成和自動化布局。集成架構中的連線可以用來表示當前系統間的接口服務連通性和接口服務調用流量等信息。但是上圖實際上離我們需要的集成架構圖可視化設計仍然有具體,具體見后面集成架構圖設計部分的一些思考。
4. 端到端流程監控可視化設計
基于服務間的集成關系和調用先后順序來實現端到端的流程監控,這個我在博客前面多次提到,也一直在尋找比較好的前端設計工具來做。比如對我們已有的流程平臺流程建模工具前端進行適度改進來支持等。
對于這類需求也可以用前面提到的工具來實現,先進行端到端監控流程圖的設計,然后在進行運行展示。其中最主要的還是在運行態的各類信息,比如運行狀態,數量,是否有異常等是否很容易疊加到已有的設計圖上。只要能夠解決這個問題,那么就能夠很好的應用到端到端流程監控的可視化設計中。
集成架構圖的可視化設計
對于集成架構圖的繪制一直是我關注的一個點,也看了類似百度Echart,D3和HighChart等,基本都沒有發現適合用來做類似集成架構圖繪制的工具。同時集成架構圖往往都不是自動繪制,而需要提前進行集成架構的圖形布局設計,布局好后才能夠用JS去繪制。
因此更多我們需要的是一個JS繪圖工具庫,能夠匯總線條,矩陣,圓等基礎圖形形狀即可。我們可以看下一個簡單的集成架構圖,經過設計排版后布局可能如下:
對于這類圖可以看到實際上各類可視化圖表庫并不太容易實現。原來我們采用過Flash來進行集成架構圖的繪制,但是Flash相對偏重不太合適。因此還是需要找一個JS繪圖庫來實現這種簡單的集成架構圖的繪制工作。
基于這個思路我們在網上找了下比較好的一些JS繪制工具庫。
jsPlumb開源流程圖繪制工具庫
那么如果你應該使用它取決于你想用jsPlumb做什么。該框架適用于必須繪制圖表的Web應用程序,例如類似于Visio的應用程序或工作流程設計器等。由于圖表項目和連接的所有參數都是非常精細可控的,因此您可以繪制您可以想到的任何類型的圖表。
該開源庫的GitHub地址為:https://github.com/wangduanduan/jsplumb-chinese-tutorial
在該地址也有詳細的中文使用教程,根據教程的一些截圖可以看到,該工具庫很適合用來繪制我們上面的集成架構圖,因為這種圖本身也就是形狀和線條的一些簡單組合,而且來拖拽功能都不需要。
當然基于該工具庫,我們也可以用來實現更加復雜的集成架構圖,即將兩個業務系統間的所有關鍵集成接口全部以連線的方式表示出來。這種集成架構圖也是無法自動生成,需要首先進行整體部版設計,然后再通過jsPlumb工具庫進行繪制即可。
如果要連接多條線條,需要整個節點作為source或者target, 并且將錨點設置成Continuous,那么錨點就會隨著節點的位置改變而改變自己的位置。這個功能特性可以很方便我進行多線條設置。
注意在這個網址,https://jsplumbtoolkit.com/community/doc/anchors.html, 這個工具庫是存在License費用的,因此如果這個工具庫用于商業用途,按道理會涉及到License的購買問題。
一篇關于該工具庫的使用參考:https://www.cnblogs.com/xcj26/p/9870734.html
另外一個用該工具庫實現的流程設計器和表單設計器: http://formdesign.leipi.org/
付費JS繪制工具庫:GoJS
GoJS是一套基于JavaScript的付費圖形繪制工具庫,地址:https://gojs.net/latest/index.html
這套工具庫有免費版本,也有收費版本,收費版本比jsPlumb工具庫來說就強大了很多,特別是動態Port圖和動態分組圖,這兩個用來繪制我們集成架構圖,應用架構圖等都相當有用。
- Dynamic Ports:Dynamically add ports and custom link routing. USe data-bindings to save and load routes within the Model JSON.
- Dynamic Grouping:Use groups as containers and subgraphs, with group members bounds by their own rules and layouts.
所有Demo演示地址參考:https://gojs.net/latest/samples/regrouping.html
JointJS工具庫
這個也是常用的繪圖工具庫,地址在:https://www.jointjs.com/
這個庫官方介紹的例子都感覺比較重,而實際其它搜索到的一些使用介紹來看,用于簡單從集成架構圖,流程圖類繪制還是沒有太大問題的。基本還是標準的新建畫板,畫布,然后進行各種圖形的定義和繪制。
jointJS是一個基于svg的圖形化工具庫,在畫布上畫出支持拖動的svg圖形,而且可以導出JSON,也能通過JSON配置導入直接生成圖形。由于這個工具庫是基于SVG的,因此也不太推薦使用。
一篇使用參考:https://segmentfault.com/a/1190000015972176
監控大屏的可視化
Quick V 是一套數據可視化大屏展示方案。在大數據時代,Quick V 將數據全面、直觀地呈現在用戶眼前,幫助管理者在面臨業務復雜度的急劇變化時,即刻擁有海量有序的決策支持信息,滿足會議展覽、業務監控、風險預警、地理信息分析等多種業務的展示需求。
參考:http://www.uileader.com/quickui_display.html
大家可以先看下上面這個大屏可視化效果,感覺整體還是做的相當不錯。這個工具本身商用收費,比較好的就是對于我們常見的大屏監控已經固化為各種模板,基本都可以直接使用。
基于百度Echart自己實現可配置的監控大屏
在前面我也談到,實際上對于監控大屏實現,當前我們完全可以采用百度Echart來定制實現,而這篇文章主要想談下如何對監控大屏可視化做到靈活可配置。
首先我們看到監控大屏可視化,實際上跟我們前面談到的自定義報表相當類似,其核心仍然是單面板設計,多面板組合。基于這個思路我們逐一展開進行描述。
在講自定義報表的時候,我們單面板設計數據集和實際的數據呈現是耦合在一起的,而實際上更好的思路是數據集和數據呈現進行分離。基于這個思路,逐一展開講關鍵功能點實現。
數據集設計
數據源定義,對于數據源定義,最好也進行獨立,一個報表前端呈現本身也可能涉及到多個數據源。數據集設計,即返回一個二維的數據集合,可以有多列。我們需要通過配置的方式來實現,即首先選擇數據源,然后自定義Sql語句,然后返回具體的數據集對象。在sql過程中我們可以對字段標題名稱等進行轉義。
更加解耦的方法是數據集可以直接選擇具體的WS服務,由服務返回一個二維的數據集對象。這種方式可以進一步實現報表平臺和底層數據庫的解耦。
單面板設計
單面板設計簡單來說就是將前端的呈現方式,究竟是折線圖,餅圖還是雷達圖等,和后端的數據集進行綁定。在這個過程中重點是要確認具體的圖表呈現的一些關鍵配置,包括X,Y軸顯示,圖表名稱,圖例是否顯示等關鍵配置,都需要在單面板設計的是配置完成。
單面板設計完成后,最好提供預覽功能按鈕,可以馬上體驗到單面板展示的效果。
大屏設計
對于大屏設計,實際上里面有幾個關鍵點,首先就是大屏展示需要有一個css模板,這個模板決定了所有的單面板圖表的配色風格,包括具體的底色,前端的色系選擇等。選擇模板就是確保最終的大屏展示各個單面板風格能夠完全保持一致。
大屏版面設計,仍然采用標準的Grid布局模式即可,可以看到所有的大屏展示基本都采用Grid布局模式。每個單面板你唯一要確定的就是橫向跨幾行,縱向跨幾列即可。類似上面的圖,我們采用4*4Grid進行布局,中間的地圖展示則是橫向跨3行,縱向跨兩列。
大屏整體的展示動態刷新能力
在以上設計完成后,我們整個大屏展示效果也就出來了。在該大屏設計中我們沒有考慮動態查詢功能。但是大屏監控仍然需要動態進行刷新。因此在設計大屏的時候需要具備動態刷新能力,為了考慮后續具備一定的擴展性,我們需要能夠將關鍵的一些變量參數傳遞到圖表展示中。
最關鍵的參數就是當前時間,當前的時間需要能夠傳遞到每一個數據集Sql中,方便我們根據時間進行數據過濾。同時對于大屏我們需要配置定時刷新頻率,基于該頻率對展示內容進行動態刷新。