市面上有很多 JavaScript 圖表庫，本文則列出了其中的幾款佼佼者，可以用在你的新項目中。
D3.js
D3.js 是一個圖形 JavaScript 庫，功能衆多，十分強大。你可以用它對文檔做數據驅動的轉換，然後將任意數據綁定到 DOM 上。
D3 是非常優秀的圖表庫。它有一些較小的技術模塊，如顏色、軸、輪廓、層次結構、多邊形、緩動等。這也意味着你需要學習很多知識才能用好它，上手並不容易。
即使用它創建簡單的圖表也可能需要複雜的步驟。你需要明確定義包含圖表項和軸在內的所有元素。它提供了一些示例，教你如何使用 CSS 來設置圖表元素的樣式。開發者無法自動應用基於圖表的功能。
如果你想從零開始設計複雜的圖表，完全按照自己的想法控制所有元素，那麼這個庫就是你的首選。但如果時間緊迫，從頭開始解決數據可視化項目需求可能就不是什麼好主意了。
作爲圖表庫來說，D3.js 可以充當構建塊。開發者可以用 D3 與 NVD3 一類的方案配合工作。這個圖表庫完全免費並開源。
Highcharts
Highcharts 是市面流行的 JavaScript 圖表庫之一，並被許多大公司採用。爲了提供對 IE6 到 IE8 的兼容性，它先使用 SVG 然後轉向 VML 來生成圖表。它的示例圖表帶有一些很棒的功能，但看起來不怎麼吸引人。它的文檔裏有很多 API 文檔教程和相關主題。
它的 API 易於使用，開發者可以使用配置選項來開發圖表。對於個人和非商業用途，Highcharts 可免費使用；證券行業等用途需要商業許可，而甘特圖和地圖圖表則需要單獨的許可證。
Chart.js
Chart.js 是一個開源 JavaScript 庫，支持 8 種類型的圖表。它只有 60kb，是一個非常小的 JS 庫。它支持的圖表類型包括雷達、內聯圖表、餅圖、條形圖、散點圖、面積圖、氣泡和混合等。它還支持時間序列。在呈現層面，它使用 canvas 元素並能響應窗口大小調整縮放比率。它對 IE9 向後兼容。要兼容 IE7 的話也可以使用 Polyfills。
初次使用它的示例時還能看到現代感的初始動畫。實時添加數據點或序列時有平滑的動畫效果。你可以調用 update() 函數來修改圖表選項並重繪圖表。
在它的網站中沒有展示示例源代碼，但可以在 GitHub 倉庫中找到。它的 API 簡潔直觀。用戶使用配置選項來創建和修改圖表。它的文檔內容翔實，附帶代碼片段和屬性 API 的教程。
這個庫可免費用於商業和個人用途。它是開源項目。但對於更高級別的需求來說，它提供的圖表類型可能有點少。
amCharts
amCarts 已經推出了第 4 版，歷史也挺長了。此版本支持 SVG 動畫引擎，可幫助開發人員創建電影級場景。
它的示例圖表非常漂亮，大多數示例都提供了滑塊 UI，還附帶許多調節器可以實時調整圖表的變量。它的文檔包括完整的 API 屬性描述和許多教程。它提供了一個聲明性 API 來創建圖表，與基於配置的方法略有不同。它有很好的代碼自動完成功能，但在配置圖表時需要的代碼略多。amCharts 的水印版圖表是免費的，去掉水印需要付費。
谷歌圖表
谷歌圖表 功能強大，易於使用。其示例圖表簡潔易讀。可以在它的圖表庫和擴展庫中找到許多圖表類型。通過層疊菜單可以查看更多圖表類型。
每種圖表類型都有附帶動態實例和很容易看懂的專門教程。這些教程附帶 API 列表，幷包含相關功能的代碼。它爲新人提供了非常愉快的入門體驗。。
用戶可以使用配置選項對象來自定義圖表。DataTable 類用來填充數據集，也可以用在所有圖表裏。每種圖表類型都帶有以獨特方式列出的選項和對應的教程。可選項很多，適用於不同類型，而屬性命名是標準化的。
谷歌圖表可以免費使用，但也有一些侷限。它是一個 Web 服務，不能在本地託管。谷歌還退役了很多 API，所以它不適合用在關鍵項目中。
ZingChart
ZingChart 中有許多圖表類型，能與 react、angular 等框架集成。它有一系列強大的功能和許多自定義選項。
它的示例圖表有許多樣式主題，其中一些看着很不錯。還有許多選項可以用來添加樣式。示例圖表沒有覆蓋它支持的所有圖表類型。
它的文檔附帶了許多功能教程，覆蓋了所有類型的圖表和全部 API。ZingChart 使用配置選項自定義圖表。示例中有很多屬性設置，如字體樣式等。但這些帶有屬性設置的示例可能會讓用戶糊塗，不知道圖表到底需要哪些設置。
ZingChart 的水印版可以免費使用。付費版沒有水印。
FushionCharts
FusionCharts 最開始是基於 Flash 的圖表插件，有着很長的歷史。它是一個健壯的圖表可視化庫，提供對現代瀏覽器的支持，支持包括 JavaScript、JSON 和 XML 在內的許多數據格式，還兼容 IE6。它還支持許多服務端編程語言和 JavaScript 框架。
它的圖表庫附帶了許多看上去簡潔大方的示例。它的文檔帶有許多良好的 API 描述，而且每種圖表類型都有示例。用戶可以通過任務和圖表功能分組配置屬性。
用戶使用基於配置的選項創建圖表，用起來非常簡單。深入研究 API 時會發現屬性列表變得很長。showAlternateHGridColor、chartLeftMargin 等配置屬性很好理解。它的代碼自動完成功能還有改進的空間。
FusionCharts 的水印版可供個人免費使用。商業和非水印版本需要付費。
Flot
Flot 用法簡單、外觀漂亮，交互功能豐富，是最優秀的純 JavaScript 繪圖庫。它有效兼容所有新式瀏覽器，包括 Internet Explorer 6 +、Chrome、Firefox 2 +、Safari 3+ 和 Opera 9.5+ 等。它是最流行、歷史最長的圖表庫。Flot 支持線、點、填充區域、條形以及它們的各種組合。
Flot 的工作機制是創建一個可以放入圖表的佔位符 div。
Sigmajs
這款產品可以用來創建一些漂亮的圖形來在 Web 上顯示網絡，並在大型 Web 應用中展示簡單的交互式網絡；這種交互式網絡具有動態探索功能。無論對初學者還是高級用戶來說它都很好用。
它配備了一些令人興奮的功能，如 Canvas 和 WebGL 渲染器，還有鼠標和觸摸支持，幫助你製作更好的動態網絡應用。
Sigmajs 默認可配置，支持鼠標和觸摸兩種交互，並可以根據容器大小變化縮放顯示。它還有自定義渲染，可以用一組工具和設置來定製網絡的交互細節。
小結
JavaScript 圖表庫生態正在不斷髮展壯大。市面上能找到大量圖表製作產品，可以滿足多種多樣的項目需求。大多數產品都提供了免費試用機會，方便用戶評估。
自己是一個6年的前端工程師,希望本文對你有幫助！
這裏推薦一下我的前端學習交流扣qun：731771211 ，裏面都是學習前端的，如果你想製作酷炫的網頁，想學習編程。自己整理了一份2019最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，插件封裝，設計模式】到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小夥伴，每天分享技術
點擊：加入