當前位置:首頁 » 網頁前端 » 數據可視化前端模版
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

數據可視化前端模版

發布時間: 2023-05-06 14:38:32

㈠ 5個常用的大數據可視化分析工具

1、FineReport
FineReport是一款純Java編寫的、集數據展示(報表)和數據錄入(表單)功能於一身的企業級web報表工具,只需要簡單的拖拽操作便可以設計復雜的中國式報表,搭建數據決策分析系統。
2、Echarts
前面說過了,Echarts是一個開源免費的javascript數據可視化庫,它讓我們可以輕松地繪制專業的商業數據圖表。
大家都知道去年春節以及近期央視大規劃報道的網路大數據產品,如網路遷徙、網路司南、網路大數據預測等等,這些產品的數據可視化均是通過ECharts來實現的。
3、FineBI
FineBI是新一代自助大數據分析的商業智能產品,提供了從數據准備、自助數據處理、數據分析與挖掘、數據可視化於一體的完整解決方案,也是我比較推崇的可視化工具之一。
FineBI的使用感同Tableau類似,都主張可視化的探索性分析,有點像加強版的數據透視表。上手簡單,可視化庫豐富。可以充當數據報表的門戶,也可以充當各業務分析的平台。
4、pyecharts
Echarts(下面會提到)是一個開源免費的javascript數據可視化庫,它讓我們可以輕松地繪制專業的商業數據圖表。當Python遇上了Echarts,pyecharts便誕生了,它是由chenjiandongx等一群開發者維護的Echarts Python介面,讓我們可以通過Python語言繪制出各種Echarts圖表。
5、Bokeh
Bokeh是一款基於Python的互動式數據可視化工具,它提供了優雅簡潔的方法來繪制各種各樣的圖形,可以高性能的可視化大型數據集以及流數據,幫助我們製作互動式圖表、可視化儀錶板等。

㈡ 可視化大屏經驗分享

最近在實際項目中積累了一些經驗,以及看到很多大神們的分享,不斷學習和豐富關於大屏設計的特點及數據可視化的表達方式。以下經驗來自於多處資源,希望對有這方面需求的同學有所幫助。

大屏顯示的一些特點:

1.面積巨大——用戶站遠才能看全內容(所以字也不能設計很小)

2.深色背景——緊張感強,讓視覺更好的聚焦,省電

3.不可操作——大屏主要用來給來用戶看的。用戶一般不會直接操作大屏

4.空間局限——大屏不像網頁有滾動條,它的長寬都是固定的

5.單獨主題——每塊大屏都有具體想給用戶表達某個主題

第一步、調查研究

需要調研的點:

1.大屏的主題——這個屏用戶要看什麼信息(要規避哪些信息)

2.數據的權威和准確性——對具體要展示的信息進行數據的核對正常數據是多少,歷史上極限數據是多少?

3.用戶的其他需求點——用戶說要用TOP10,但有時候只是用戶只知道TOP能表達,還有很多形式也能表示TOP的信息

第二步、視覺效果定位(腦暴窮舉、分類去重、投票確定)

緊張:數據的實時,動效的變化

科技:新穎的圖表,新穎的動效

豐富:數據豐富,豐富層次感,圖表類型多,強烈的空間感

權威:安全元素

第四步、數據表現元素

常規數據表現元素:地圖,top10,餅圖,列表,數字,趨勢等。

如果在多個屏上都只放這些元素,展現上會缺乏很多心意,業務差別性也不好體現。所以需要對每個需求再剖析。

第五步、需求分析,數據挖掘

1.拆分維度——將需求拆分到最小維度

2.確定優先——選擇最佳數據來說明觀點

3.合並維度——對維度元素進行歸類,化繁為簡

4.最佳表現——確定用哪種表現形式來體現數據

舉個栗子:

在做這一系列的具體某一個屏時,某業務需要大屏展示的內容:我們的業務針對特定區域的保護,正在實時防禦著世界各地多類型的攻擊。能看到每個攻擊類型的當天累加值和趨勢。

對於這個內容,我們先進行拆分維度。你們能看到多少維度呢?(一定要拆到最小維度)

接著,確定這些維度的主次優先順序。

對這些信息進行相似度歸類,化繁為簡。關聯性最多的維度用同一種顏色表示,畫出所有的關系。

上圖表示,所有的維度互相關系。我們可以發現時間維度和所有的內容都有聯系。

但是時間又是個隱形的內容,大屏上的數據為了表示緊張性,時間如果是實時展現的。那麼這個維度在設計的時候不必要用某個具體的視覺元素來表現,是通過在時間節點上的動效變化來表現的。所以我們把這時間線去掉,並對交錯關系的維度進行位置的調整。

理清邏輯關系,我們最常用的一個方法就是藉助於思維導圖,這樣我們能更加清晰知道業務需求以及數據關聯性。

關系理清楚後,我們接下來可以就行規劃設計了。

第六步、規劃設計

在這塊主要是細節和感受的設計。

1.模塊設計——考慮的模塊縱橫柵格布局設計

2.維度表現——具體維度用什麼表現的確定

3.動效設計——時間的把握和情感的控制

4.數量控制——對實施數據的不可控性進行展現上的控制。考慮數據極端情況效果太密或太疏,如何規避

大屏和其他顯示屏一樣,本身都是有固定解析度的。

拼接大屏 :大屏幾乎都是拼接屏,UI設計時不用考慮屏幕縫隙影響 內容 的呈現,內容不會丟失,但有可能影響 視覺 的表現,例如一個很大的人物圖像被縫隙正中「劈成」兩半,或者「劈中」了眼睛,看起來很不舒服,所以設計時可以建立縫隙位置的參考線避免類似情況發生。(現在企業常用的有無縫隙、1.7mm縫隙、3.5mm縫隙、三種拼接大屏,縫隙越小越貴)

設計尺寸: 拼接的每塊小屏一般是16:9的高清屏,設計尺寸可以把上下高度設定為1080px,長度按照拼接屏的數量比例得出長度的設計尺寸。例如3乘5的一塊大屏幕,高度3塊屏設為1080,每塊高就是360,360除9乘16等640,640就是一塊屏幕的長度,640乘5塊屏=3200最後得出設計稿尺寸就是:高1080px乘寬3200px。

第七步、檢查測試

1.重視需求——過一遍需求是不是能夠滿足。

2.實地測試——將效果放上大屏,看是否方便閱讀,動效是否達到預期,色差是否能接受。

3.可信性測試——當自己的講解員,給用戶講解大屏。能否一句話描述大屏,同時用戶能夠理解。

設計大屏一定是一個長期跟進的過程。有很多問題會在真正數據進來了,放在大屏上顯示才能發現。

整個項目的流程

那讓大屏怎麼看起來更炫酷,簡單的總結幾個方法:

1)布局排版

大屏首先是要服務於業務,讓業務指標和數據合理的展現。由於往往展現的是一個企業全局的業務,一般分為主要指標和次要指標兩個層次,主要指標反映核心業務,次要指標用於進一步闡述。所以在製作時給予不一樣的側重。

2)色彩

背景色又分為整體背景以及單個元素的背景,無論是哪一個,都遵從兩點基本原則:深色調&一致性。

整體背景深色系,可選的餘地還是很多的,但是配起來能讓多數人都覺得好看的還是以深藍色系為主,如下所示是幾個推薦的配色方案。根據實際項目經驗,這里極其推薦大家為單個的組件元素搭配一些透明色,透明度設置在10%上下為宜,具體以實際效果微調。

3)點綴效果

細節影響感官體驗,在大屏展現上,細節也會極大的影響整體效果。通過適當給元素、標題、數字等添加一些諸如邊框、圖畫等在內的點綴效果,能幫助提升整體美觀度。頂部的標題通過左右兩個對稱線條進行點綴,各個組件的細分標題通過不規則漸變色圖片進行點綴,另外每個組件都搭配使用了簡潔的邊框以提升層次感。

4)動效

動效的增加能讓大屏看上去是活的,增加觀感體驗。

以下舉幾個案例:

阿里在數據可視化方面已經做的相當超前了,早在2015年的雙11銷售數據就使用DataV數據可視化引擎搭建數據大屏。

以上大屏利用了DataV數據可視化引擎,以日常圖表組件庫d.chart以及地理相關組件庫d.map為基礎,專業數據可視化模板設計為視覺框架,依託cube前端框架搭建起來的web服務。通過該引擎可以利用已有組件低成本還原設計師產出的原型圖,快速完成多種數據源的綁定,並通過最終的可視化配置調整系統完成所見即所得的視覺調試,最終產出數據大屏。

工作模式:由之前的「設計->開發」變為「設計->開發->設計->開發」,做到高度還原設計效果。

市場上很多可視化的工具,像帆軟和Tableau都是都是數據處理分析軟體,兩個各有特點。

可以根據業務需求,選擇工具,來展示自己的大屏。

以下打開finereport設計器中,按照布局樣式,從組件欄拖入對應的圖表元素到指定區域並綁定數據。

點擊預覽按鈕,瀏覽器端的效果如下圖所示。

接下來就是配色、點綴和動效了,可根據需求調整界面效果。

還有很多值得推薦的可視化工具,以下列出幾個,供大家學習:

Raw 、 Infogram 、 ChartBlocks 、 Visualize Free 、 Visual.ly 、 iCharts

Chart.js 、 D3.js 、 FusionCharts 、 JavaScript InfoVis Toolkit 、 jQuery Visualize 、 ZingChart 、 Flot 、 Gephi

地圖數據可視化工具

CartoDB 、 InstantAtlas 、 Polymaps 、 OpenLayers 、 Leaflet

純可視化圖表生成/圖表插件——適合開發,工程師

Echarts( echarts..com )、AntV ( antv.alipay.com )、HighCharts ( www.hcharts.cn )

可視化報表類——適合報表開發、BI工程師

FineReport ( www.finereport.com )

商業智能分析——適合BI工程師、數據分析師

Tableau ( www.tableau.com )

FineBI ( www.finebi.com )

Power BI ( powerbi.microsoft.com/zh-cn/ )

可視化大屏類

阿里DataV ( data.aliyun.com/visual/datav )

數字冰雹 ( www.digihail.com )

這是最近幾天對數據大屏的一些學習,在這里進行分享。

如果感覺有幫助,請點贊啦,謝謝~~