摘要：本人也做過一些數據可視化相關的產品，下面聊聊對數據可視化的一些思考。這也是數據可視化最麻煩的一直，一般我們借助的地圖，或者百度地圖，高德地圖等來開發，其實百度地圖也出了個地圖可視化的庫，展示效果沒有好。。。。

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

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

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

產品需要懂數據可視化的理論基礎，哪些數據可以可視化，哪些數據是用戶最想要的。

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

前端其實在里面是最緊密的一環，數據怎么獲取，什么格式對前后端最友好，采用什么技術方案，是svg的庫，還是canvas的庫，是自己擼還是用現成的庫。實現成本有多高，性能、擴展性怎么樣都是需要考慮的問題

后端需要考慮的就是數據的拉取，需要考慮數據格式以及能獲取哪些數據。

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

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

餅圖和環形圖也差不多，取決于我要不要在中間顯示其他內容嗎？

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

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

其實這方面是有相關的信息圖表學的相關知識儲備的話就不會犯這些錯誤了。支付寶有個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隱藏掉。。。。。

數據可視化系統

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

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

未完待續

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