在不少項目中都會有在前端展示數據圖表的需求,而在開發過程當中,開發者每每會使用一些JavaScript庫,從而更有效地達到想要的目標。最近,TechSlide上的一篇文章總結了50種用於展示圖表的JavaScript庫,並對每種庫作了簡要的說明。這對於想要選擇合適JavaScript庫的開發者頗有參考意義。javascript
文章做者首推的庫是D3,他說到:html
它很是讓人驚歎,我很喜歡它的簡潔性。它的文檔很是完備,源代碼託管在GitHub上,並且不斷會添加新的示例。有一種叫作Tributary的建立D3原型的工具,其中有不少很是棒的示例。這個庫很是好,以致於xcharts、nvd三、Rickshaw、Cubism.js、dc.js、xkcd都是基於它構建的。若是你想要作出優秀的自定義數據可視化效果,那麼D3多是你最佳選擇,或者對於更簡單的圖,你能夠選擇上面所提到的基於D3的庫。最後,我強烈推薦閱讀Scott Murray關於D3的免費書《Interactive Data Visualization for the Web》和《Dashing D3 tutorials》。前端
接下來,他列舉並簡要說明了其它用於展示數據、製做表格和圖表的JavaScript庫,列在前20位的以下:java
- HighCharts——它很是強大,你能夠在JSFiddle中查看和編輯大量示例。它難免費,但擁有不少客戶(IBM、NASA、MasterCard等)。它還向下兼容IE 8。
- jqPlot——若是你已經在使用jQuery,不想爲HighCharts付費,並且狀況很簡單,不須要D3那樣複雜的庫,那麼jqPlot是很好的選擇。
- dygraphs——一種開源的JavaScript庫,能夠作出可交互、可縮放的時間線圖表。對於大數據集合很是適用。
- Protovis——和D3出自同一支團隊之手,是一種免費的開源庫。你能夠查看這個stackoveflow 頁面來了解D3與其的區別。
- Flot Charts——與jqPlot同樣,Flot是一種針對jQuery的純JavaScript庫,專一於簡單的用法、引人注目的外觀和交互特性。
- Google Chart Tools——強大、免費、易於使用。內容豐富,從最簡單的線狀圖到負責的層級樹狀圖都有,在展現頁面中提供了大量設計良好的圖表類型。
- dc.js——基於D3的JavaScript圖表庫,擁有本地跨過濾器(crossfilter)的支持,並讓你能夠高效率地瀏覽大型多維數據集。
- xcharts——基於D3用於構建自定義圖表的庫。
- nvd3——讓你能夠構建可重用的圖表和圖表組件,同時具備d3.js的強大功能。
- rickshaw——用於建立可交互時間線圖表的JavaScript工具。
- Cubism.js——用於可視化時間線的D3插件。使用了Cubism構建更好的實時儀表盤,能夠從Graphite、Cube和其餘源拉取數據。
- xkcd——讓你可使用D3在JavaScript中作出XKCD樣式的圖表。
- jQuery Sparklines——一種jQuery插件,能夠直接在瀏覽器中建立小型的內嵌圖表。
- peity——一種簡單的jQuery插件,能夠把元素的內容轉換成簡單的餅圖、線圖和柱狀圖。
- BonsaiJS——一種輕量級的圖形庫,擁有直觀的圖形API和SVG渲染器。
- Flotr——爲Prototype.js所用的JavaScript圖表庫。它擁有不少特性,像對負數值的支持、鼠標跟蹤、選定支持、縮放支持、事件掛鉤、CSS樣式支持、在畫布(canvas)中包含文字、旋轉的標籤、漸變顏色、圖形標題和子標題、電子表格、CSV數據下載等等。
- ProtoChart——物如其名,ProtoChart讓你可使用JavaScript和Prototype建立很漂亮的圖表。它是一種開源庫。
- Flotr2——HumbleSoftware當前正在作的項目,讓你可使用Canvas和JavaScript建立圖表。
- jQuery-Visualize——HTML的table元素驅動的HTML5 canvas圖表。也是針對jQuery的圖表插件。
- JS Charts——基於JavaScript的圖表生成器,只須要不多甚至不須要編碼。免費版會有水印,能夠經過付費去掉。
- ……
文章中還列舉的JavaScript庫有:PlotKit、MilkChart、moochart、moowheel、table2chart、Canvas 3D Graph、TufteGraph、ArborJS、TimePlot、gRaphael、ICO、Elycharts、ZingChart、RGraph、Dojo Charting、Bluff、canvasXpress、ccchart、JIT、JSXGraph、Smoothie Charts、YUI Charts、amcharts、Emprise JavaScript Charts、FusionCharts、JavaScript Diagram Builder、jGraph、Sencha Touch Charts、Style Chart、AwesomeChartJS等,都各有千秋,若是你對這些庫感興趣的話,能夠訪問相應的連接或者閱讀原文。python
這個列表對於想要利用JavaScript技術建立圖表展示數據的開發者來講,很是具備參考意義,你能夠從中選擇最適合的庫,從而高效、高質量地完成任務。jquery
來源:InfoQ投稿,原文連接。git