JavaScript數據可視化產品哪家強

這幾年隨著大數據的浪潮，以及媒體融合概念被媒體們重視，各種數據產品層出不窮，數據新聞百花齊放，與此同時，各種Web的數據可視化產品也紛紛如雨後春筍版出現，早期如D3.js，Highcharts等等，到後來國產的DataV，ECharts，再到最近的G2、Recharts等，那對於那些有選擇恐懼症的人而言，這無疑是個痛苦的過程，那今天我們就來盤一盤現在主流的前端數據圖表庫哪家強，哪家最受歡迎。

我們首先把目光集中在Github上，Github的explore專門有一個Web數據可視化工具（Data Visualization Tools for web）的列表，我們截取了在這個列表中關注數超過一萬的四個產品來先做個介紹：

github 可視化explorer排名

第一名：D3.js

D3.js作為最老牌的數據可視化產品之一，在全球領域算是最權威的產品，在Github上的關注度高達65,544，不僅僅在數據可視化產品中排名第一，在JavaScript的榜單上也一直高居前五名內。D3的特點在於數據驅動，可定製化強，缺點在於上手有一定的門檻，但是D3的生態非常豐富，有大量基於D3封裝的各種基礎圖表，能夠一定程度簡化開發。

D3.js

第二名：Chartjs

Chartjs也是資歷比較老的一款可視化產品，基於Canvas實現，在Github上有三萬的關注（star），最新的2.0版本中針對動畫效果、座標軸進行了一些優化，並且支持了多種圖表混搭的功能。學習門檻比較低，使用方法和D3不同，大部分是通過配置項來實現。對於基礎簡單的可視化需求，能夠高效便捷地實現，針對不同尺寸的屏幕及移動端的兼容性也做得不錯，雖然在視覺和交互上並沒有針對移動端做特殊設計，但移動端上的性能沒有拖後腿。

第三名：Leaflet

和上面兩款不同，Leaflet專注於地圖可視化，體積小（僅38k），移動端兼容好，是它在各種地圖可視化產品中的優勢。Facebook，Github等公司都是它的客戶。Leaflet不僅僅支持基於地圖的可視化呈現，也提供了大量交互的支持，同時生態圈也比較豐富。有地圖可視化需求的工程師不妨嘗試一下。下面這個圖是非常經典的一個用Leaflet做的例子，描述的是科比職業生涯中三萬多次投籃的位置分佈及命中情況。

Leaflet

第四：ECharts

排在第四名的是國產開源產品，ECharts。ECharts的特點是圖表異常豐富、功能強大，尤其是EChartsGL堪稱世界一流，易上手、有中文文檔及中文支持，免費開源，基於BSD協議，對於使用方限制較少，所以贏得了很多國內用戶。但缺點也很明顯，英文文檔寫得不夠流暢，國外推廣乏力，另外也有很多國內用戶覺得中文文檔的易讀性相比其他產品有一定缺陷，對於移動端的支持在性能上有一定缺陷，同時，生態相對國外產品沒有那麼豐富，但是這也是沒辦法的事情，國內的開源環境是使用大於貢獻這樣一個狀況。ECharts作為國產開源產品，也在Github上贏得了近兩萬的關注多數（Star）非常不易。

echarts示例

當然，還有一些產品因為不是開源產品，所以不在Github的這個列表中，為了滿足小編的八卦之心，想看看究竟國內目前使用可視化產品是一個什麼樣的情況，我們在騰訊問卷上做了調研，通過一些前端、大數據以及數據新聞的群進行了投放，收回了近兩千個問卷，量不是太大，所以大家切勿認真，數據結果僅僅代表某些技術微信、QQ群的使用情況。

我們很無聊地選了23個數據可視化產品，從產品認知率、使用率來簡單做了統計，結果如下：

首先是產品認知率，如下圖，我們可以看見，上面提到過的通用型圖表產品D3.js，ECharts，Chart.js以及商業產品Highcharts更多地被前端工程師所知曉，那在國內做調研，自然ECharts的認知率會有一定優勢，我們也驚喜地發現，另一個國產的產品G2，作為一個新生，也逐漸被大家所知曉。

Web數據可視化產品知曉率條形圖

再來看看使用率，在調研時，我們問題是，最近3個月使用過的圖表，所以不排除有工程師3個月內完全沒有開發過可視化需求，也不排除有工程師3個月內用了多種產品來開發。

在結果中，可以看見通用類產品依然排名前五，ECharts的優勢相對比較明顯，看來中國的工程師對於國產軟件還是比較偏愛的，希望ECharts能夠不辜負國人的信任，不要輕易棄坑，把產品持續做好。

Web數據可視化產品使用率條形圖

那最後，問題來了，頭條的朋友們，你們都知道這些產品嗎？有在用的朋友嗎？或者你對於這個統計結果嗤之以鼻，不屑一顧，那讓我們在評論區熱烈地討論起來吧。