JavaScript:用於創建圖表展現數據的JS圖表庫

在很多項目中都會有在前端展現數據圖表的需求,而在開發過程中,開發者往往會使用一些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庫,可以做出可交互、可縮放的時間線圖表。對於大數據集合非常適用。
  • 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的圖表生成器,只需要很少甚至不需要編碼。免費版會有水印,可以通過付費去掉。

參考推薦:

Highcharts配置詳細文檔

JFreeChart學習示例

JFreeChart項目實例

發佈了105 篇原創文章 · 獲贊 20 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章