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

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

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

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

產(chǎn)品需要懂?dāng)?shù)據(jù)可視化的理論基礎(chǔ)，哪些數(shù)據(jù)可以可視化，哪些數(shù)據(jù)是用戶最想要的。

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

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

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

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

我的這些數(shù)據(jù)，好像柱狀圖、折線圖、餅圖都能表示啊，到底應(yīng)該選哪個？

餅圖和環(huán)形圖也差不多，取決于我要不要在中間顯示其他內(nèi)容嗎？

我可不可以將數(shù)據(jù)映射到餅圖的半徑維度上

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

其實這方面是有相關(guān)的信息圖表學(xué)的相關(guān)知識儲備的話就不會犯這些錯誤了。支付寶有個G2 里面有兩個相關(guān)的圖表學(xué)基礎(chǔ)知識介紹，我個人認(rèn)為這是G2 比echart更近一步，更規(guī)范化的點之一。

詳見這里

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

可視化基礎(chǔ)-圖表設(shè)計指引規(guī)范：https://antv.alipay.com/vis/d...

以及經(jīng)典文獻(xiàn)：
在數(shù)據(jù)可視化的研究和實現(xiàn)中，《數(shù)據(jù)可視化》、《The Grammarof Graphics》、《深入淺出統(tǒng)計學(xué)》、《計算機圖形學(xué)幾何工具算法詳解》、《Visualization Analysis and Design》 、《ggplot2：數(shù)據(jù)分析與圖形藝術(shù)》 。

叨叨了這么多基礎(chǔ)，下面說說前端在可視化里的一些相關(guān)的發(fā)展和技術(shù)選型

首先需要明白一個觀點：技術(shù)選型沒有一勞永逸的，永遠(yuǎn)是根據(jù)你的項目實際情況以及你的個人偏好和技術(shù)基礎(chǔ)來做的選擇。

下面說說常見的一些圖表庫和相關(guān)技術(shù)：

1.echarts

echarts算是國產(chǎn)的圖表庫里最好的了。EFE團(tuán)隊也是國內(nèi)技術(shù)實力最雄厚的可視化團(tuán)隊.采用canvas作為渲染容器。底層一些實現(xiàn)比如鼠標(biāo)事件啥的用的自己開發(fā)的zrender框架。
echart2.0對應(yīng)不同的組件比如坐標(biāo)軸圖例是用不同的canvas來渲染的，echart3之后都合并到一個canvas里面了，猜測應(yīng)該是底層的框架升級了
博客： http://efe.baidu.com/，鄙人的博客就是copy的他們的皮膚。。。。。。
這個博客更的很慢了。
http://echarts.baidu.com/blog...。

2.highcharts

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

3.G2-支付寶

螞蟻金服的產(chǎn)品，圖表容器為canvas，玉伯的團(tuán)隊開發(fā)的。怎么說呢。。這個東西看著還不錯，不過實際使用的時候大部分人還是會不由自主的去選擇前面兩個，大阿里系的開源東西就是這么個鬼情況。東西是不錯，就怕搞著搞著團(tuán)隊沒了。而且他們官網(wǎng)那些示例最開始貌似是那個嫩藍(lán)色（or嫩綠色？）看起來讓人覺得整個產(chǎn)品很輕浮，不像echarts 墨黑色，一種商務(wù)穩(wěn)重風(fēng)。現(xiàn)在貌似也慢慢像穩(wěn)重風(fēng)格靠攏了。繼續(xù)下去感覺還是不錯的。

4.d3.js

d3也算是資歷比較老的一個產(chǎn)品了，采用svg作為圖表容器。剛開始出來的時候各種動畫比較驚艷圖表類型也很豐富，感覺echarts一開始也參照它的圖表類型新增了好幾個圖表示例。

d3的優(yōu)點是各種示例demo比較完善適合拿來就用，缺點就是demo不適合二次開發(fā)，熟悉api的話也可以直接自己畫，他的api是對svg的dom的一種整理和兼容，類比于jquery對應(yīng)html的dom。

其他：

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

以上就是最常見的一些圖表庫，那么我們需要根據(jù)實際項目需要來做一些技術(shù)選型。

移動端圖表庫，echarts和G2應(yīng)該都可以。pc端就看個人喜好了。報表類型的項目看設(shè)計師畫的效果稿吧，echarts可定制性最高，G2沒用過，highcharts文檔不健全。

監(jiān)控類型的項目需要頻繁更新數(shù)據(jù)的優(yōu)選選擇canvas的性能應(yīng)該更好。

下面說說數(shù)據(jù)可視化的一般應(yīng)用場景

報表類，監(jiān)控類，動效pr稿類，地圖類，數(shù)據(jù)可視化系統(tǒng)等。

報表類

報表類使用場景最多，使用的圖表也最簡單一般echarts里面的示例圖表就能滿足了，

監(jiān)控類

監(jiān)控類稍微復(fù)雜點，一般涉及到實時性和穩(wěn)健性，開發(fā)的時候需要考慮后端的接口性能，以及頁面圖表渲染的性能問題，數(shù)據(jù)量大了之后對前后端都很有挑戰(zhàn)性。做起來也比較有意思，和業(yè)務(wù)場景結(jié)合起來能做一整套的數(shù)據(jù)可視化的產(chǎn)品系統(tǒng)。

動效PR稿類

這種類型的項目一般都有一個特點：急，炫，累。項目周期很急，動畫效果要很炫，干起活來很累。偶爾做做還行，一直搞，就感覺路走的有點偏，而且一般很少能找到現(xiàn)成的庫和框架，前期需要大量的技術(shù)調(diào)研和技術(shù)儲備。相關(guān)的庫一般需要canvas的效果庫，webGL的庫，比如:http://www.pixijs.com/ ，threejs，要求更高的可能需要一些游戲庫來幫忙了比如：https://www.egret.com/ ，http://www.createjs.com/等等。

地圖類

這類的數(shù)據(jù)可視化多帶帶拿出來是因為現(xiàn)在越來越多的數(shù)據(jù)可視化場景里需要用到地圖。這也是數(shù)據(jù)可視化最麻煩的一直，一般我們借助echart的地圖，或者百度地圖，高德地圖等來開發(fā)，其實百度地圖也出了個地圖可視化的庫http://mapv.baidu.com/ ，展示效果沒有echart好。。。。需要定制開發(fā)的同學(xué)其實可以直接拿百度地圖之類的然后在地圖上蒙一層覆蓋類，然后在這個覆蓋類里填充一個canvas做一些自己的擴展參見百度地圖的demo；背后的地圖。?？梢杂胏ss隱藏掉。。。。。

數(shù)據(jù)可視化系統(tǒng)

這個范疇比較大，還是需要看業(yè)務(wù)場景，某些業(yè)務(wù)場景就特別適合做一堆相關(guān)聯(lián)的數(shù)據(jù)可視化系統(tǒng)。做好了成就感還是滿滿的。

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

未完待續(xù)

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