11 個用來建立圖形和圖表的 JavaScript 工具包

oschina發表於2013-08-07
JavaScript

　　文章基本上是以引導的方式向你介紹最流行最有成效的JS工具包，用來製作圖表和圖形。概述了這些工具包到底能為你做什麼。如果你是一個開發者，尋求最新的開發工具是工作中必不可少的部分，接下來的這些工具包絕對能讓你事半功倍。希望這些能夠給JS開發者帶來意想不到的驚喜。

　　1、Aristochart

　　DEMO || Download

Aristochart-Sophisticated-and-simplified-static-Javascript-2D-line-charts

　　Aristochart毫無疑問是製作圖形圖示最好的工具包之一，值得一提的是，它能夠自定義設定屬性，同時還是一個很靈活的線型圖表庫。你完全不用擔心設計的圖表和圖形是否美感，因為Aristochart會幫你處理好後端資料的。另外，它還會向你提供大量的可供選擇的佈景主題。

　　DEMO || Download

　　2、Morris.Js——漂亮的時序線型圖  

Morris

　　Morris.Js的工作效率也很高，它實際上是一個控制圖形的類庫。這個使用起來較為簡單的API可以繪畫出線形圖、條形圖、面形圖和炸面圈圖。用完之後你就會發現它的確很方便。

　　DEMO || Download

　　３、JKit——基於JQuery的UI工具包 

jKit-jQuery-based-UI-Toolkit

　　JKit操作起來也不是很難，這是一款跨平臺基於JQuery的UI工具包，儘管它是輕量級的工具包，但你所需要的功能它都有。簡而言之，它去除了開發程式裡的複雜曲折步驟，為你創造更簡便的工作環境。

　　DEMO || Download

　　4、D3.Js——JQuery 3D外掛  

D3.js-jQuery-3D-Plugin

　　如果你想依據資料來操作文件，那麼D3.Js JS類庫將是你最好的選擇。它能幫助你在HTML，SVG和CSS的協助下使得資料變得更有活力。最大的優點是，它不會將你束縛在專有的框架上。

　　DEMO || Download

　　5、Rickshaw——JS工具包用於建立互動時間序列圖  

Rickshaw-JavaScript-toolkit-for-creating-interactive-time-series-graphs

　　對於建立互動圖形，Rickshaw可以為你提供所有所需的元素。因為它完全是建立在d3基礎上的，所以能夠繪畫SVG圖形和CSS風格的圖形。同樣，這款免費的開源工具可以允許你定製自己的技術。

　　DEMO || Download

　　6、sDashboard——在jQuery裡簡單輕便的Dashboard框架

sDashboard-Simple-light-weight-Dashboard-framework-in-jQuery

　　sDashboard主要是一個jQuery外掛，用途是將各種目標物件轉換成一個控制皮膚。任何一個目標物件被轉換之後都將以一個視窗小部件的形式出現，開發者可以拖拽這個小部件。這個外掛的安裝還可以支援解釋資料表和flotr3圖形。此外還有很多其它的有用的功能。

　　DEMO || Download

　　7、Highcharts——網頁互動的JavaScript圖表

Highcharts---Interactive-JavaScript-charts-for-your-webpage

　　Highcharts是一個製作圖表的純Javascript類庫，主要特性如下：

  • 相容性：相容當今所有的瀏覽器，包括iPhone、IE和火狐等等；
  • 對個人使用者完全免費；
  • 純JS，無BS；
  • 支援大部分的圖表型別：直線圖，曲線圖、區域圖、區域曲線圖、柱狀圖、餅裝圖、散佈圖；
  • 跨語言：不管是PHP、Asp.net還是Java都可以使用，它只需要三個檔案：一個是Highcharts的核心檔案highcharts.js，還有a canvas emulator for IE和Jquery類庫或者MooTools類庫；
  • 提示功能：滑鼠移動到圖表的某一點上有提示資訊；
  • 放大功能：選中圖表部分放大，近距離觀察圖表；
  • 易用性：無需要特殊的開發技能，只需要設定一下選項就可以製作適合自己的圖表；
  • 時間軸：可以精確到毫秒；

　　8、jqPlot——一個多功能可擴充套件的jQuery繪圖外掛

jqPlot---A-Versatile-and-Expandable-jQuery-Plotting-Plugin

　　jqPlot是一個繪圖外掛能夠建立出一些比較美觀的餅狀圖、線狀圖和條形圖。它具有多種功能，提供可定製的格式和大量的圖表型別。這個外掛已經在很多知名的瀏覽器上測試過了，例如IE 7 、Firefox、safari和Opera。

　　DEMO || Download

　　9、jQuery蜘蛛圖外掛——用HTML5建立的動態互動的蜘蛛圖

Query-Spidergraph-Plugin-Dynamic,-interactive-spidergraphs-in-HTML5

　　想要用HTML5建立蜘蛛圖嗎？那麼jQuery蜘蛛圖應該是你的首選。這基本上是一個很普通的但易於使用的模組，能夠幫助開發者建立外觀很吸引人的蜘蛛圖。它還包括其它功能：為不同的主觀屬性解說收縮資料和覆蓋多個資料。

　　DEMO || Download

　　10、Dygraphs JavaScript視覺化類庫

dygraphs-JavaScript-Visualization-Library

　　創造一個互動式的、可縮放的圖表可不是件簡單的事，不過，dygraphs可以做到這一點，它是開源的JS庫，這就說明dygraphs是很有用的。這款類庫設計目的是展示下滑的資料，使用者也可以很隨意的搜尋資料來闡述這些下滑的資料。

　　DEMO || Download

　　11、利用JQuery和XCharts為你的APP創造更好的圖表

　　也許大家都知道，圖表是呈現資料的最好的、最簡單的方法。想要不使用圖表來製作一個專業的管理員皮膚恐怕是一件很棘手的事情。然而，像XCharts這樣的類庫真的是幫了很大的忙了，你還可以利用它來構建一些美妙的AJAX生成圖表。

　　DEMO || Download

　　英文來源：inspiretrends

相關文章