初次接觸 web 圖表開發的工程師,面對眾多的可視化工具庫難免會有疑惑,比如說:
這庫的產品定位?
哪個更好學?
哪個更強大?
讓我們帶著問題,從這三個庫的命名出發,比較一下:
簡述:
該庫為百度團隊開發,因其開源免費又容易手上,所以很快流行起來。
正如其名 Echarts,亦如其它的 xxCharts 類庫一樣,該庫中封裝了絕大多數常規 chart,用戶通過配置 options 參數,就可很容易繪制指定圖表。
優勢:
容易上手:其語法類似 css 的參數配置型語法,學習門檻較低。
圖表種類較豐富:因其發布較早且有百度團隊維護,其提供的圖表類型已能滿足絕大部分常規性的業務需求。
劣勢:
自由度差:參數配置型語法庫的本質是調用現成的繪圖函數,所以此類庫的通病就是定制化能力差,想做出開發者未封裝的圖表非常難。
代碼復用率低:因為此類庫封裝程度已非常高,所以很難對其進一步抽象和封裝。
產品受眾:
無數據可視化知識的前端工程師
簡述:
該庫由螞蟻金服 antV 團隊開發,其設計理念更有學術性,走出了一條與 echarts 不同的產品線路。
正如其名 The?Grammar of?Graphics -可視化圖形語法,該庫有著被稱為可視化圣經的《The Grammar of Graphics》作理論支撐,將可視化理論與web技術做了非常好的結合。
優勢:
自由度較高:由可視化理論做基礎,沒有類似 Echart 的 chart 概念,可用“可視化語法”繪制想要的圖表,非常靈活。
例如一根堆積柱形圖的坐標系由笛卡爾坐標系改為極坐標系,堆積柱形圖就變為了圓環圖。
代碼復用率較高:因其有一套完善的可視化語法,所以團隊或公司可根據自己的 UI 需求,用 g2 做底層庫,封裝自己的 charts 庫。
劣勢:
學習成本稍高:g2 有理論的加持既是優勢也是劣勢;優勢是更高效了,卻也提高了可視化小白的使用門檻。
比如理解 g2 的繪圖原理至少要知道數據可視化的五種“視覺通道”:數據可以映射到 position, size, color, shape, opacity 五個維度等等。
產品受眾:
數據可視化工程師
希望向數據可視化領域發展的前端工程師
簡述:
該庫幾乎憑 Mike Bostock?一人之力完成,且在學術界、專業團隊中享有極大聲譽。(想自學 D3 的同學請戳 《如何自學 D3》)
該庫更接近底層,與 g2、echarts 不同,d3 能直接操作 svg,所以擁有極大的自由度,幾乎可以實現任何 2d 的設計需求。
正如其名 Data?Driven?Documents,其本質是將數據與 DOM 綁定,并將數據映射至 DOM 屬性上(這時視覺通道、比例尺轉換等理論就可發揮作用嘍~)。
同時,如下圖,d3 長于可視化,而不止于可視化,還提供了數據處理、數據分析、DOM 操作等諸多功能。?
優勢:
掌握 d3 后,限制作品水平的只會是想象力而不再是技術。
劣勢:
學習門檻較高,對用戶的 web 技術、可視化理論、數學邏輯都一定要求。
產品受眾:
希望向中高水平進階的可視化工程師
希望向中高水平進階的前端工程師
題外話:
任何一款工具型產品,在產品設計時都遇到“自由度”和“簡便性”兩者間的權衡與取舍,而往往這兩者很難兼得,我將這種情況稱之為“蹺蹺板難題”。?
這也是為什么 echarts 使用簡單而自由度差, d3 自由度好而學習門檻高的原因了。
所以,回到 “哪個更強大” 的問題,這個問題,從不同角度看,會有不同答案。
在我看來,這三款可視化庫各有優劣,沒有哪款更強大,只有哪款更適合。
就像美圖秀秀與 PhotoShop,分別滿足了不同人群,不同場景的需求。
以上