用於展現圖表的50種JavaScript庫
在很多專案中都會有在前端展現資料圖表的需求,而在開發過程中,開發者往往會使用一些JavaScript庫,從而更有效地達到想要的目標。最近,TechSlide上的一篇文章總結了50種用於展現圖表的JavaScript庫,並對每種庫做了簡要的說明。這對於想要選擇合適JavaScript庫的開發者很有參考意義。
文章作者首推的庫是D3,他說到:
它非常讓人驚歎,我很喜歡它的簡潔性。它的文件非常完備,原始碼託管在GitHub上,而且不斷會新增新的示例。有一種叫做Tributary的建立D3原型的工具,其中有很多非常棒的示例。這個庫非常好,以至於xcharts、nvd3、Rickshaw、Cubism.js、dc.js、xkcd都是基於它構建的。如果你想要做出優秀的自定義資料視覺化效果,那麼D3可能是你最佳選擇,或者對於更簡單的圖,你可以選擇上面所提到的基於D3的庫。最後,我強烈推薦閱讀Scott Murray關於D3的免費書《Interactive Data Visualization for the Web》和《Dashing D3 tutorials》。
接下來,他列舉並簡要說明了其它用於展現資料、製作表格和圖表的JavaScript庫,列在前20位的如下:
- 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等,都各有千秋,如果你對這些庫感興趣的話,可以訪問相應的連結或者閱讀原文。
這個列表對於想要利用JavaScript技術建立圖表展現資料的開發者來說,非常具有參考意義,你可以從中選擇最適合的庫,從而高效、高質量地完成任務。
相關文章
- 幾款實用的 JavaScript 圖形圖表庫JavaScript
- xCharts:基於D3的JavaScript圖表庫JavaScript
- ECharts:基於HTML5 Canvas的JavaScript圖表庫EchartsHTMLCanvasJavaScript
- 用於構建互動式圖表的最佳 jQuery 圖表庫jQuery
- 給開發者提供的 35 款 JavaScript 圖形圖表庫JavaScript
- 給開發者提供的35 款JavaScript 圖形圖表庫JavaScript
- 最好的 3 個開源 JavaScript 圖表庫JavaScript
- 前端開發者常用的9個JavaScript圖表庫前端JavaScript
- 21 個最棒最有用的 JavaScript 圖表庫JavaScript
- 50種優化資料庫的方法優化資料庫
- 基於SWT的Java圖表類庫SWTChartJava
- 分享一個開源的JavaScript統計圖表庫,40行程式碼實現專業統計圖表JavaScript行程
- 4個頂級開源JavaScript圖表庫JavaScript
- JavaScript視覺化圖表庫MetricsGraphics.jsJavaScript視覺化JS
- 基於jQuery Mobile的圖表應用JQMChartsjQuery
- 基於canvas實現的高效能、跨平臺的股票圖表庫--clchartCanvas
- 聊一聊圖資料庫的發展現狀資料庫
- 11 個用來建立圖形和圖表的 JavaScript 工具包JavaScript
- JavaScript視覺化圖表庫D3.jsJavaScript視覺化JS
- 開發適用於微信小程式的跨平臺圖表庫:part1微信小程式
- 用 JavaScript 實現簡單拼圖遊戲JavaScript遊戲
- Javascript – Arraylike的7種實現JavaScript
- [轉]9個優秀的基於 JavaScript 與 CSS 的 Web 圖表框架JavaScriptCSSWeb框架
- 【Numpy應用】--對於圖片處理的機器學習庫的應用機器學習
- 向 Web 開發人員推薦35款 JavaScript 圖形圖表庫WebJavaScript
- 50種方法巧妙優化你的SQL Server資料庫優化SQLServer資料庫
- 如果檢視應用效能圖表是一種信仰
- 實現 JavaScript 沙箱的幾種方式JavaScript
- 圖表庫原始碼剖析 – Chart.js 最流行的 Canvas 圖表庫原始碼JSCanvas
- 圖表庫原始碼剖析 - Chart.js 最流行的 Canvas 圖表庫原始碼JSCanvas
- 純JavaScript圖表元件dhtmlxChartJavaScript元件HTML
- JavaScript 3D圖表JavaScript3D
- JavaScript_圖片庫JavaScript
- Javascript圖片庫(1)JavaScript
- Matplotlib 視覺化最有價值的 50 個圖表視覺化
- 資料視覺化最有價值的50個圖表視覺化
- 13個JavaScript圖表(JS圖表)圖形繪製外掛JavaScriptJS
- 數字展廳設計所表現出的應用優勢