對web數據可視化的一些理解

最近幾年隨着大數據的興起，以及瀏覽器性能的提高，數據可視化成爲了一個熱點，前端也冒出來了不少數據可視化的崗位。本人也作過一些數據可視化相關的產品，下面聊聊對數據可視化的一些思考。本文的數據可視化通常專指互聯網公司web前端接觸的數據可視化

數據可視化，是關於數據視覺表現形式的科學技術研究。其中，這種數據的視覺表現形式被定義爲，一種以某種概要形式抽提出來的信息，包括相應信息單位的各類屬性和變量。它是一個處於不斷演變之中的概念，其邊界在不斷地擴大。主要指的是技術上較爲高級的技術方法，而這些技術方法容許利用圖形、圖像處理、計算機視覺以及用戶界面，經過表達、建模以及對立體、表面、屬性以及動畫的顯示，對數據加以可視化解釋。與立體建模之類的特殊技術方法相比，數據可視化所涵蓋的技術方法要普遍得多. ----------------------百度百科

而前端常說的視覺可視化大部分是指藉助曲線圖表等展現形式把一些相關數據更直接、形象、生動、具體的展現在web頁面上。要作一個好的數據產品是須要 產品經理->設計師->前端->後端->用戶整個鏈路緊密配合密切合做而且協調的。

1. 產品須要懂數據可視化的理論基礎，哪些數據能夠可視化，哪些數據是用戶最想要的。

2. 設計師包括視覺和交互，須要理清楚數據怎麼展現最合理，曲線，柱狀圖，餅狀圖，都有哪些優缺點，不能僅僅爲了美觀設計了一個好看的圖形，而不顧實際數據狀況，展現出來就很奇怪。

3. 前端其實在裏面是最緊密的一環，數據怎麼獲取，什麼格式對先後端最友好，採用什麼技術方案，是svg的庫，仍是canvas的庫，是本身擼仍是用現成的庫。實現成本有多高，性能、擴展性怎麼樣都是須要考慮的問題

4. 後端須要考慮的就是數據的拉取，須要考慮數據格式以及能獲取哪些數據。

以上分工只是一個粗略的說明。這裏看了一篇文章當心，這餅有毒！論餅圖的正確打開方式裏面講的一些經歷可能你們都遇到過，我也深有同感

個人這些數據，好像柱狀圖、折線圖、餅圖都能表示啊，到底應該選哪一個？

餅圖和環形圖也差很少，取決於我要不要在中間顯示其餘內容嗎？

我可不能夠將數據映射到餅圖的半徑維度上

數據可視化最重要的不是好看，而是讓人一目瞭然的明白這個圖表傳達出來的意思。

其實這方面是有相關的信息圖表學的相關知識儲備的話就不會犯這些錯誤了。支付寶有個G2 裏面有兩個相關的圖表學基礎知識介紹，我我的認爲這是G2 比echart更近一步，更規範化的點之一。

詳見這裏

可視化基礎-圖表使用建議 https://antv.alipay.com/vis/d...

可視化基礎-圖表設計指引規範：https://antv.alipay.com/vis/d...

以及經典文獻：
在數據可視化的研究和實現中，《數據可視化》、《The Grammarof Graphics》、《深刻淺出統計學》、《計算機圖形學幾何工具算法詳解》、《Visualization Analysis and Design》 、《ggplot2：數據分析與圖形藝術》 。

叨叨了這麼多基礎，下面說說前端在可視化裏的一些相關的發展和技術選型

首先須要明白一個觀點：技術選型沒有一勞永逸的，永遠是根據你的項目實際狀況以及你的我的偏好和技術基礎來作的選擇。

下面說說常見的一些圖表庫和相關技術：

1.echarts

echarts算是國產的圖表庫裏最好的了。EFE團隊也是國內技術實力最雄厚的可視化團隊.採用canvas做爲渲染容器。底層一些實現好比鼠標事件啥的用的本身開發的zrender框架。
echart2.0對應不一樣的組件好比座標軸圖例是用不一樣的canvas來渲染的，echart3以後都合併到一個canvas裏面了，猜想應該是底層的框架升級了
博客： http://efe.baidu.com/，鄙人的博客就是copy的他們的皮膚。。。。。。
這個博客更的很慢了。
http://echarts.baidu.com/blog...。

2.highcharts

這個框架用的人也很多，主打就是IE6也支持。。。。。。。。。然並卵微軟都不支持IE6了。淘寶連ie8都不支持了。。。。收費的庫，底層用的SVG。私覺得他的API使用起來沒有Echart友好。

3.G2-支付寶

螞蟻金服的產品，圖表容器爲canvas，玉伯的團隊開發的。怎麼說呢。。這個東西看着還不錯，不過實際使用的時候大部分人仍是會不禁自主的去選擇前面兩個，大阿里系的開源東西就是這麼個鬼狀況。東西是不錯，就怕搞着搞着團隊沒了。並且他們官網那些示例最開始貌似是那個嫩藍色（or嫩綠色？）看起來讓人以爲整個產品很輕浮，不像echarts 墨黑色，一種商務穩重風。如今貌似也慢慢像穩重風格靠攏了。繼續下去感受仍是不錯的。

4.d3.js

d3也算是資歷比較老的一個產品了，採用svg做爲圖表容器。剛開始出來的時候各類動畫比較驚豔圖表類型也很豐富，感受echarts一開始也參照它的圖表類型新增了好幾個圖表示例。

d3的優勢是各類示例demo比較完善適合拿來就用，缺點就是demo不適合二次開發，熟悉api的話也能夠直接本身畫，他的api是對svg的dom的一種整理和兼容，類比於jquery對應html的dom。

其餘：

一兩年前阿里媽媽貌似出過一個圖表庫，我當初還給他們留言說：爲啥不先出一個移動端的圖表庫說不定更有市場。貌似最後淪爲KPI的犧牲品

以上就是最多見的一些圖表庫，那麼咱們須要根據實際項目須要來作一些技術選型。

移動端圖表庫，echarts和G2應該均可以。pc端就看我的喜愛了。報表類型的項目看設計師畫的效果稿吧，echarts可定製性最高，G2沒用過，highcharts文檔不健全。

監控類型的項目須要頻繁更新數據的優選選擇canvas的性能應該更好。

下面說說數據可視化的通常應用場景

報表類，監控類，動效pr稿類，地圖類，數據可視化系統等。

報表類

報表類使用場景最多，使用的圖表也最簡單通常echarts裏面的示例圖表就能知足了，

監控類

監控類稍微複雜點，通常涉及到實時性和穩健性，開發的時候須要考慮後端的接口性能，以及頁面圖表渲染的性能問題，數據量大了以後對先後端都頗有挑戰性。作起來也比較有意思，和業務場景結合起來能作一整套的數據可視化的產品系統。

動效PR稿類

這種類型的項目通常都有一個特色：急，炫，累。項目週期很急，動畫效果要很炫，幹起活來很累。偶爾作作還行，一直搞，就感受路走的有點偏，並且通常不多能找到現成的庫和框架，前期須要大量的技術調研和技術儲備。相關的庫通常須要canvas的效果庫，webGL的庫，好比:http://www.pixijs.com/ ，threejs，要求更高的可能須要一些遊戲庫來幫忙了好比：https://www.egret.com/ ，http://www.createjs.com/等等。

地圖類

這類的數據可視化單獨拿出來是由於如今愈來愈多的數據可視化場景裏須要用到地圖。這也是數據可視化最麻煩的一直，通常咱們藉助echart的地圖，或者百度地圖，高德地圖等來開發，其實百度地圖也出了個地圖可視化的庫http://mapv.baidu.com/ ，展現效果沒有echart好。。。。須要定製開發的同窗其實能夠直接拿百度地圖之類的而後在地圖上蒙一層覆蓋類，而後在這個覆蓋類裏填充一個canvas作一些本身的擴展參見百度地圖的demo；背後的地圖。。能夠用css隱藏掉。。。。。

數據可視化系統

這個範疇比較大，仍是須要看業務場景，某些業務場景就特別適合作一堆相關聯的數據可視化系統。作好了成就感仍是滿滿的。

================================================

未完待續

=======================================