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

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

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

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

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

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

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

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

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

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

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

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

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

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

詳見(jiàn)這里

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

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

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

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

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

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

1.echarts

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

2.highcharts

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

3.G2-支付寶

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

4.d3.js

d3也算是資歷比較老的一個(gè)產(chǎn)品了，采用svg作為圖表容器。剛開(kāi)始出來(lái)的時(shí)候各種動(dòng)畫(huà)比較驚艷圖表類(lèi)型也很豐富，感覺(jué)echarts一開(kāi)始也參照它的圖表類(lèi)型新增了好幾個(gè)圖表示例。

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

其他：

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

以上就是最常見(jiàn)的一些圖表庫(kù)，那么我們需要根據(jù)實(shí)際項(xiàng)目需要來(lái)做一些技術(shù)選型。

移動(dòng)端圖表庫(kù)，echarts和G2應(yīng)該都可以。pc端就看個(gè)人喜好了。報(bào)表類(lèi)型的項(xiàng)目看設(shè)計(jì)師畫(huà)的效果稿吧，echarts可定制性最高，G2沒(méi)用過(guò)，highcharts文檔不健全。

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

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

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

報(bào)表類(lèi)

報(bào)表類(lèi)使用場(chǎng)景最多，使用的圖表也最簡(jiǎn)單一般echarts里面的示例圖表就能滿(mǎn)足了，

監(jiān)控類(lèi)

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

動(dòng)效PR稿類(lèi)

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

地圖類(lèi)

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

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

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

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

未完待續(xù)

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