前端可視化就是將數據以更直觀的圖表展現在網頁中,方便用戶查看和決策,目前針對前端可視化,可用的框架非常多,下面我簡單介紹幾個不錯的前端可視化框架,感興趣的朋友可以自己嘗試一下:

ECharts.js

這是百度自己推出的一個前端可視化框架,可以很流暢的運行在PC和移動設備上,製圖種類繁多,交互性也非常好,下面我簡單介紹一下這個框架的使用:

1.首先,引入ECharts.js庫,這裡我們直接遠程src引入就行,創建一個html文檔,定義一個div容器,後面需要通過JS API將圖表引入這個div容器,基本代碼如下,非常簡單:

2.接著我們就可以在上面的script標籤中引入圖表了,測試代碼如下,一個非常簡單的柱狀圖,官方示常式序,每個參數都解釋的非常清楚:

保存這個html文件,用瀏覽器打開,效果如下,已經成功繪製出我們需要的圖表:

3.更多圖表和代碼示例的話,可以參考一下官網教程資料,介紹的非常詳細,每個示例都可以在線編輯和運行,非常方便:

Highcharts.js

這也是一個非常不錯的前端可視化框架,完美支持PC端和移動端,製圖種類也非常多,包括常見的散點圖、柱狀圖、餅圖等,下面我簡單介紹一下這個框架的使用:

1.首先,引入Highcharts.js庫,這個也直接遠程引入就行,基本思路和echarts一樣,也需要創建一個div容器用於放置圖表,代碼如下,非常簡單:

2.接著就是通過JS API引入圖表,測試代碼如下,一個非常簡單的組裝圖,官方的一個小示例,參數解釋的非常詳細:

保存這個html文件,用瀏覽器打開後的效果如下,看著還是非常不錯的:

3.更多圖表示例的話,也直接參考官方文檔就行,每個參數都介紹的非常詳細,代碼也可以直接在線編輯,效果非常不錯:

D3.js

這是一個非常強大的前端可視化框架,組件和屬性眾多,製圖種類琳琅滿目,幾乎可以繪製各種意想不到的圖表,下面我簡單介紹一下這個框架的使用:

1.首先,引入D3.js 庫,這個也直接遠程引入就行,測試代碼如下,非常簡單,這裡就不需要創建div容器了:

2.接著就是使用D3.js的各種組件和屬性繪圖,這裡都是函數式的編程,相比較前面2個框架來說,使用起來具有一定難度,需要一定的JS基礎:

程序運行效果如下,一個堆疊的柱狀圖:

3.這裡更多示例的話,也直接參考GitHub官網就行,各種圖標都介紹的非常詳細,源代碼也可以直接下載到本地:

至此,我們就介紹完了這3個前端可視化框架。總的來說,這3個框架都非常不錯,前兩個框架使用起來比較簡單,也容易掌握,後面D3使用起來具有一定難度,但是功能非常強大,當然,還有許多其他前端可視化框架,像Leaflet,Sigma.js等,也都非常不錯,感興趣的話,可以搜一下,希望以上分享的內容能對你有所幫助吧,也歡迎大家評論、留言進行補充。


其實前端可視化一直在做,其實可以說目前沒有什麼進展。主要是無法滿足全部需求,


推薦閱讀:
相關文章