2014-3-3 藍藍設計的小編
轉載藍藍設計( axecq.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
來源：http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
圖表是數據圖形化的表示，通過形象的圖表來展示數據，比如條形圖，折線圖，餅圖等等。可視化圖表可以幫助開發者更容易理解復雜的數據，提高生產的效率和Web應用和項目的可靠性。
在這篇文章中，藍藍設計收集了值得網站設計開發者收藏的JavaScript圖形圖表庫，適合各種圖表需求。其中大部分都是免費而且開源的，希望大家能在下面的列表中找到適合自己需求的JavaScript圖表和圖形庫。
1. JS Charts
JS Charts 是個基于JavaScript的圖表生成器，不需要任何編碼。JS Charts 非常容易使用，只要用戶使用客戶端腳本（比如，在 web 瀏覽器中執行）。它不需要多余的插件和服務器模塊，只需要下載 JS Charts 的腳本，準備好 XML，JSON 或者 JavaScript 數組數據。
CanvasJS 是個易用的 HTML5 & JavaScript 圖表庫，基于 Canvas 元素。Graphs 可以通過設備渲染，包括 iPhone，iPad，Android，Windows Phone，Microsoft Surface，Desktops 等等。它允許用戶創建適用于所有設備，不影響 web 應用程序的功能和可維護性的富儀表盤。CanvcasJS 有著非常漂亮的主題和超過傳統的 Flash 和 SVG 圖表 10x 倍以上的速度——生成輕量級，漂亮和響應式的儀表圖。
Chart.js 是個簡單的，面向對象的客戶端圖形庫，用戶可以用 6 中不同的方式來可視化數據。每個方式都是動畫效果的，完全自定義，而且看起來非常好看，即使在 retina 顯示。它使用 HTML5 canvas 元素，支持所有現代瀏覽器，并且支持 IE7/8。
Aristochart 是個高度自定義，靈活的折線 Canvas 圖表庫，允許用戶集中精力在圖表的審美方面，后臺工作做得非常好。Aristochart 有個持續進步的社區，提供許多不斷增長的主題給用戶選擇。
xCharts 是一個使用 D3.js 來構建漂亮的可定制的數據驅動的 JavaScript圖表庫，他使用HTML，CSS，SVG實現圖表，xCharts 被設計為一個動態的、流暢的、開放的和可定制化的庫。
BonsaiJS 是個輕量級的 JavaScript圖形庫，提供直觀的圖形 API 和 SVG 渲染器。主要特性包括：架構分離的運行器和渲染器；iFrame，Worker 和 Node 運行上下文；形狀，路徑，Assets（音頻，圖像，字體，subMovies），Keyframe 和常規動畫，等等。支持現代化瀏覽器： Safari, Chrome 和 Firefox。
Sigma.js 是個免費開源的 JavaScript圖形庫，使用 HTML5 canvas 元素。它的設計是特別為了在 web 界面分享交互式網絡 Map 和動態展示網絡數據庫。
Morris.js 是個輕量級的 JavaScript庫，使用 jQuery 和 Rapha&enuml 來繪制時序圖。 Morris.js 生命周期是從代碼驅動 howmanyleft.co.uk 圖表開始的。它支持的瀏覽器有： IE6+, Safari/Chrome/Firefox, iOS 3+ 和 Android 3+。它的公共 API 非常的小，只有一個函數： Morris.Line(選項)，包括了許多配置選項。
Paper.js 是一個開源的向量圖形腳本框架，基于 HTML5Canvas 開發。提供清晰的場景圖、DOM和大量強大的功能用來創建各種向量圖和貝塞爾曲線。
AmCharts 是個高級圖表庫，適用于所有數據的可視化。AmCharts 包括： Column, Bar, Line, Area, Step, Step without risers, Smoothed line, Candlestick, OHLC, Pie/Donut, Radar/ Polar, XY/Scatter/Bubble, Bullet, Funnel/Pyramid 等等。
Smoothie Charts是個極小的圖表庫，專為實時流媒體數據設計的。Joe Walnes 想展示 WebSocket推動的實時的流數據。雖然很多圖表庫允許用戶動態更新數據，但是沒有一個是可以優化源源不斷的流數據。
Dygraphs 是個快速，靈活，開源的 JavaScript 圖表庫。它允許用戶展示和解析密集的數據集。可以高亮需要強調的數據集。可以使用鼠標點擊或者用鼠標拖動來縮放圖表；可以修改數值或者點擊條目來調整平均周期。
Grafico 是 Grafico 是一個基于 Rapha?l 和 Prototype.js 構建的 JavaScript 圖表庫，提供了各種圖表類型。這些漂亮的圖表，有利于傳遞他們的信息。
Highcharts JS 是一個制作圖表的純 Javascript類庫，主要特性如下：兼容性：兼容當今所有的瀏覽器，包括 iPhone、IE 和火狐等等；對個人用戶完全免 費；純JS，無BS；支持大部分的圖表類型：直線圖，曲線圖、區域圖、區域曲線圖、柱狀圖、餅裝圖、散布圖；跨語言：不管是 PHP、Asp.net 還是 Java 都可以使用。
Flotr 是一個基于 Prototype 開發的 JavaScript繪圖工具。支持圖例，鼠標跟蹤，圖片區域選擇，圖片縮放，添加事件鉤子（event hook），通過CSS設置樣式等。
Flot 是受 Plotr 和 PlotKit 的 啟發，Ole Laursen 基于 jquery 開發了一個圖表繪制(WEB Chart)插件并命名為 flot。 flot 是個純 JavaSript 庫，專注于簡單的使用方式，迷人的外觀和交互式特性。支持的瀏覽器有： Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+。
JFreeChart 主要用來各種各樣的圖表，這些圖表包括：餅圖、柱狀圖(普通柱狀圖以及堆棧柱狀圖)、線圖、區域圖、分布圖、混合圖、甘特圖以及一些儀表盤等等。JFreeChart 項目歷史悠久，而且有大量的開發者在維護。
PlotKit 是一個純 JavaScript 繪圖工具包。它支持 HTML Canvas 和 Adobe SVG。有著很完整的文檔，方便用戶使用。
Planetary.js 是個令人稱奇的創建交互式 web 地球儀的 JavaScript庫。它使用 D3 和 TopoJSON 來解析和渲染地理信息。Planetary.js 使用基于插件的架構，甚至默認自身就是個插件！這使得 Planetary.js 非常靈活，而且它是允許用戶完全自定義，包括顏色，大小，rotation 等等。更重要的是，用戶可以在任意位置使用自定義的顏色和大小來顯示動畫“pings”；它還支持鼠標拖動和縮放，100% 免費和開源。
Ember Charts 是個圖表庫，使用 Ember.js 和 d3.js 框架構建的。它包括時間線，條形圖，餅圖和散點圖，非常容易擴展和修改。這些圖表組件都是開箱即用的，在圖表交互和演示方面應用的很好。
Sparky 是個免費的 JavaScript 波形圖庫，依賴于 Raphaël ，非常容易使用。支持多個圖表類型（折線，條形，area），折線和區域圖可以有多個顏色選擇。
Envision.js 是個 JavaScript 庫，用來簡化，快速創建交互式的 HTML5 可視化圖表。它包括兩個圖表類型：時序圖和 Finance ，提供 API 給開發者，用戶可以直接自定義創建圖表。這個庫氏基于 Flotr2 和 HTML5 Canvas 的。它與框架無關，依賴于幾個小的 JavaScript 庫。