用于展現(xiàn)圖表的50種JavaScript庫(kù)

2013-02-17 09:52:58來源:InfoQ作者:

在很多項(xiàng)目中都會(huì)有在前端展現(xiàn)數(shù)據(jù)圖表的需求,而在開發(fā)過程中,開發(fā)者往往會(huì)使用一些JavaScript庫(kù),從而更有效地達(dá)到想要的目標(biāo)。最近,TechSlide上的一篇文章總結(jié)了50種用于展現(xiàn)圖表的JavaScript庫(kù),并對(duì)每種庫(kù)做

在很多項(xiàng)目中都會(huì)有在前端展現(xiàn)數(shù)據(jù)圖表的需求,而在開發(fā)過程中,開發(fā)者往往會(huì)使用一些JavaScript庫(kù),從而更有效地達(dá)到想要的目標(biāo)。最近,TechSlide上的一篇文章總結(jié)了50種用于展現(xiàn)圖表的JavaScript庫(kù),并對(duì)每種庫(kù)做了簡(jiǎn)要的說明。這對(duì)于想要選擇合適JavaScript庫(kù)的開發(fā)者很有參考意義。

文章作者首推的庫(kù)是D3,他說到:

它非常讓人驚嘆,我很喜歡它的簡(jiǎn)潔性。它的文檔非常完備,源代碼托管在GitHub上,而且不斷會(huì)添加新的示例。有一種叫做Tributary的創(chuàng)建D3原型的工具,其中有很多非常棒的示例。這個(gè)庫(kù)非常好,以至于xcharts、nvd3、Rickshaw、Cubism.js、dc.js、xkcd都是基于它構(gòu)建的。如果你想要做出優(yōu)秀的自定義數(shù)據(jù)可視化效果,那么D3可能是你最佳選擇,或者對(duì)于更簡(jiǎn)單的圖,你可以選擇上面所提到的基于D3的庫(kù)。最后,我強(qiáng)烈推薦閱讀Scott Murray關(guān)于D3的免費(fèi)書《Interactive Data Visualization for the Web》和《Dashing D3 tutorials》。

接下來,他列舉并簡(jiǎn)要說明了其它用于展現(xiàn)數(shù)據(jù)、制作表格和圖表的JavaScript庫(kù),列在前20位的如下:

  • HighCharts——它非常強(qiáng)大,你可以在JSFiddle中查看和編輯大量示例。它不免費(fèi),但擁有很多客戶(IBM、NASA、MasterCard等)。它還向下兼容IE 8。
  • jqPlot——如果你已經(jīng)在使用jQuery,不想為HighCharts付費(fèi),而且情況很簡(jiǎn)單,不需要D3那樣復(fù)雜的庫(kù),那么jqPlot是很好的選擇。
  • dygraphs——一種開源的JavaScript庫(kù),可以做出可交互、可縮放的時(shí)間線圖表。對(duì)于大數(shù)據(jù)集合非常適用。
  • Protovis——和D3出自同一支團(tuán)隊(duì)之手,是一種免費(fèi)的開源庫(kù)。你可以查看這個(gè)stackoveflow 頁(yè)面來了解D3與其的區(qū)別。
  • Flot Charts——與jqPlot一樣,F(xiàn)lot是一種針對(duì)jQuery的純JavaScript庫(kù),專注于簡(jiǎn)單的用法、引人注目的外觀和交互特性。
  • Google Chart Tools——強(qiáng)大、免費(fèi)、易于使用。內(nèi)容豐富,從最簡(jiǎn)單的線狀圖到負(fù)責(zé)的層級(jí)樹狀圖都有,在展示頁(yè)面中提供了大量設(shè)計(jì)良好的圖表類型。
  • dc.js——基于D3的JavaScript圖表庫(kù),擁有本地跨過濾器(crossfilter)的支持,并讓你可以高效率地瀏覽大型多維數(shù)據(jù)集。
  • xcharts——基于D3用于構(gòu)建自定義圖表的庫(kù)。
  • nvd3——讓你可以構(gòu)建可重用的圖表和圖表組件,同時(shí)具有d3.js的強(qiáng)大功能。
  • rickshaw——用于創(chuàng)建可交互時(shí)間線圖表的JavaScript工具。
  • Cubism.js——用于可視化時(shí)間線的D3插件。使用了Cubism構(gòu)建更好的實(shí)時(shí)儀表盤,可以從Graphite、Cube和其他源拉取數(shù)據(jù)。
  • xkcd——讓你可以使用D3在JavaScript中做出XKCD樣式的圖表。
  • jQuery Sparklines——一種jQuery插件,可以直接在瀏覽器中創(chuàng)建小型的內(nèi)嵌圖表。
  • peity——一種簡(jiǎn)單的jQuery插件,可以把元素的內(nèi)容轉(zhuǎn)換成簡(jiǎn)單的餅圖、線圖和柱狀圖。
  • BonsaiJS——一種輕量級(jí)的圖形庫(kù),擁有直觀的圖形API和SVG渲染器。
  • Flotr——為Prototype.js所用的JavaScript圖表庫(kù)。它擁有很多特性,像對(duì)負(fù)數(shù)值的支持、鼠標(biāo)跟蹤、選定支持、縮放支持、事件掛鉤、CSS樣式支持、在畫布(canvas)中包含文字、旋轉(zhuǎn)的標(biāo)簽、漸變顏色、圖形標(biāo)題和子標(biāo)題、電子表格、CSV數(shù)據(jù)下載等等。
  • ProtoChart——物如其名,ProtoChart讓你可以使用JavaScript和Prototype創(chuàng)建很漂亮的圖表。它是一種開源庫(kù)。
  • Flotr2——HumbleSoftware當(dāng)前正在做的項(xiàng)目,讓你可以使用Canvas和JavaScript創(chuàng)建圖表。
  • jQuery-Visualize——HTML的table元素驅(qū)動(dòng)的HTML5 canvas圖表。也是針對(duì)jQuery的圖表插件。
  • JS Charts——基于JavaScript的圖表生成器,只需要很少甚至不需要編碼。免費(fèi)版會(huì)有水印,可以通過付費(fèi)去掉。
  • ……

文章中還列舉的JavaScript庫(kù)有:PlotKit、MilkChartmoochart、moowheel、table2chart、Canvas 3D Graph、TufteGraph、ArborJS、TimePlot、gRaphaelICO、Elycharts、ZingChart、RGraphDojo Charting、Bluff、canvasXpress、ccchart、JITJSXGraph、Smoothie Charts、YUI Chartsamcharts、Emprise JavaScript Charts、FusionChartsJavaScript Diagram Builder、jGraph、Sencha Touch Charts、Style Chart、AwesomeChartJS等,都各有千秋,如果你對(duì)這些庫(kù)感興趣的話,可以訪問相應(yīng)的鏈接或者閱讀原文

這個(gè)列表對(duì)于想要利用JavaScript技術(shù)創(chuàng)建圖表展現(xiàn)數(shù)據(jù)的開發(fā)者來說,非常具有參考意義,你可以從中選擇最適合的庫(kù),從而高效、高質(zhì)量地完成任務(wù)。

關(guān)鍵詞:JavaScript圖表

贊助商鏈接: