己要寫一個餅圖費時費力，用canvas雖然可以實現，但是很難達到預期的效果，網上有很多開源的圖表組件庫，我們可以在這個基礎上進行二次開發，方便而且省時省力，也可以寫出很酷炫的效果！

01 echarts

地址：https://echarts.apache.org/

推薦：★★★★★

簡介：ECharts，一個強大的、交互式的瀏覽器圖表和可視化庫。是我用得最多的圖表庫了。豐富的圖表庫，很多用戶把自己的模板都上傳在這里，多達幾萬個圖表模板！

02 highcharts

地址：https://www.highcharts.com.cn/

推薦：★★★★★

簡介：兼容 IE6+、完美支持移動端、圖表類型豐富、方便快捷的 HTML5 交互性圖表庫！

03 chart.js

地址：https://www.chartjs.org/

推薦：★★★★

簡介：Chart.js 是由社區共同維護的開源項目,歡迎任何人參與! 8 種圖表類型 為你的數據提供 8 種可視化展現方式,每種方式都具有動態效果并且可定制。在所有現代瀏覽器（IE11+）上都有高效的繪圖效率。

04 Antv

地址：https://antv.vision/zh

推薦：★★★★★

簡介：Antv 是螞蟻集團全新一代數據可視化解決方案,致力于提供一套簡單方便、專業可靠、無限可能的數據可視化最佳實踐。它是一個龐大的圖表生態系統。不單單包含基礎圖表組件。其中的G2更適合我們今天介紹的圖表庫。

05 bizCharts

地址：https://antv.vision/zh

推薦：★★★★

簡介：BizCharts是阿里通用圖表組件庫，致力于打造企業中后臺高效、專業、便捷的數據可視化解決方案，基于 G2與G2Plot封裝的React圖表庫，已經歷阿里復雜業務場景長達三年的洗禮，在靈活性、易用性、豐富度上滿足常規圖表和高度自定義圖表的業務實現。缺點就是沒有vue版的。

06 three.js

地址：https://threejs.org/

推薦：★★★★★

簡介：3D圖表的首選，是JavaScript編寫的WebGL第三方庫。提供了非常多的3D顯示功能。

07 datav

地址：http://datav.jiaminghi.com/

推薦：★★★★★

簡介：含有react和vue版的，搭配echarts一起使用簡直完美！它通過組合不同的配置項可以達到多變的視覺效果。大部分組件設置寬高或配置簡單的數據即可使用。有三個demo，不過我看很久沒維護了。

個企業在做重要決定時都傾向于做數據分析，實際上他們很多時候都是沉淪在數據里頭，不知道如何跳出其中。企業一直尋求更好的方式來可視化數據、進行更好的互動、使圖表多角度化。畢竟，只有從數據中得出的見解才是有用的。

JavaScript 圖表庫出現了，作為美觀且容易理解的交互式的可視化圖表最有力的工具，它更容易提取和傳達關鍵的模式和見解，而這一點在靜態圖表中往往不明顯。

為了使事情更加簡單，我努力挖掘了很多選項，找到了最好的JavaScript 圖表庫。來，讓我們開始吧。

1、chartist

Chartist的高效和人性化設計甚至吸引了離開 Excel 就會感覺不舒服的人。可響應（使用媒體查詢）和獨立 DPI 意味著這些圖表可以為你提供一個良好的解決方案，如果你在考慮將你的圖表應用于包括手機，平板和桌面電腦的多終端設備，基于SVG的設計讓它在未來更具兼容性。

Chartist 的與眾不同在于它是社區的成果，這使得它沒有其他圖表庫的局限性。由于過于關注瑣碎的變動和功能完整，導致你在使用其他類庫時很焦心。

協議: 開源，所有用戶皆可免費使用。

2、FusionCharts

FusionCharts帶來了最全面的庫，超過90種圖表和900種圖——所有均就緒備用。它們自詡為行業內最好看的圖表，它提供了一個功能強大的體驗儀表板，通過它可以鳥瞰其整個業務功能。

FusionCharts 兼容從 PC 和 Mac 電腦，iPhone 和 Android 平板電腦等多種設備；他們做了許多額外的努力來確?？鐬g覽器的兼容性，甚至包括 IE6！

他們還涵蓋了所有基礎格式 —— JSON 和 XML 數據格式都能夠接受；繪制可以通過 HTML5、SVG 和 VML，圖表可以導出為 PNG、JPG 或 PDF 格式。FusionCharts 的擴展可以很容易地與你所選擇的任何技術集成，包括 jQuery，AngularJS，PHP 和 Rails。

總的來說，FusionCharts 擁有你創建漂亮圖表和做嚴格業務分析所需的任何特征和格式。而且最好的部分是非商業用途時你可以免費下載并使用，沒有任何限制。

源碼許可證：非商業免費，商業用途收費。

3、DyGraphs

Dygraphs 是一個開源的 JavaScript 圖表庫，最適用于極端大數據集。它是開箱式互動，通過縮放甚至可以支持手機。

它既兼容主流瀏覽器，也向后兼容 IE8。選項和自定義回調功能使它具有極高的可配置性。

協議: 開源，面向所有用戶免費。

4、Chartjs

Chart.js適用于小項目，扁平化，干凈，優雅，快速。它是一個微型的開源庫，最小化壓縮后只有11kb大小。它包括六個核心圖表類型（線圖，柱圖，雷達圖，極地圖，餅圖和環形圖），每個都是獨立的模塊，所以你甚至可以只加載項目需要的模塊以最大化縮小代碼占用空間。

它使用HTML5 canvas元素渲染圖表，并且使用polyfills方式兼容在IE7/8上運行。所有圖表都是可響應的。

協議: 開源，面向所有用戶免費。

5、GoogleCharts

Google Charts 提供大量不同種類的圖表，它最大程度上滿足了數據可視化的需要。圖表基于 HTML5/SVG，為了兼容老版本的 IE 還支持 VML。所有的圖表都是可交互可縮放的。你可以去看看他們的圖表庫。最棒的是他們的圖表絕對免費。

協議：免費，但是不開源，在你的服務器上使用他們的 JS 文件是 Google’s協議不允許 的。因此如果你是一家企業并且有很多敏感數據，Google Charts 可能不是一個最佳的選項。

6、HighCharts

Highcharts 是又一個流行的交互圖表庫，與其他庫一樣，它是基于 HTML5/SVG/VML，所以不需要擴展插件。提供的圖表類型很廣泛，像曲線圖，柱狀圖，條形圖，地圖，儀表盤等。

它還提供個人用戶免費可在線生成交互式圖表的接口 Highcharts cloud，商業使用需要購買授權。

協議: 非商業使用免費，商業使用付費。

7、Flot

Flot 是最古老的圖表庫之一，用法簡單并聚焦交互特性。它是特定的 jQuery 庫，這意味著使用它需要熟悉基礎的 jQuery。但是從另一方面來說，這意味著你可以全面控制呈現，動作和用戶交互。

Flot 兼容大多數瀏覽器，向下兼容到 IE6。Flot 的插件庫提供許多類型的圖，所有貢獻都是社區提供的。你可以看看這些由 Flot 制作的例子。

協議: 開源，面向所有用戶免費。

8、D3.js

D3通常是提到數據可視化時出現的第一個名字。它是一個非常強大的開源項目，可以通過動態更新DOM創造出驚人的視覺效果和圖形。另外，它使用HTML，CSS和SVG。

它符合W3C標準，并且是跨瀏覽器兼容的。開發者們往往喜歡它所帶來的許多特征，比如“進入和退出”以及強大的過渡。你可以到這里找到一些 D3 的示例。

需要說明的是，它沒有預建圖表，即時學習基本的圖表也有一條非常陡峭的學習曲線。但開發者們極富創新性，開發出了不少基于D3的包裝庫。后面我們將涉及到其中的一些佼佼者。

源碼許可證: 開源。免費使用。

9、n3-charts

如果你正在尋找一種在 AngularJS 應用下創建簡單互動線圖的方法，這將是你所需要的。N3 基于D3.js，針對少量受眾–基于 AngularJS 繪制通用線圖。如果你需要更多的圖表類型，它可能不適合你。你可以在這里看到一些N3線圖的實例。

源碼許可證：開源。對所有人免費。

10、NVD3

NVD3是一個旨在建立可復用的圖表和組件的 d3.js 項目——它提供了同樣強大的功能，但更容易使用。它可以讓你處理復雜的數據集來創建更高級的可視化。

源碼許可證：開源。對所有人免費。

11、Ember Charts

Addepar 的開發者正為提升 Ember 以及其附屬庫 Ember Charts、Ember Tables 和 Ember Widgets 的體驗的工作而穩步推進著。Ember Charts 基于 D3.js 和 Ember.js 框架提供了一個易于使用的，可擴展的圖表套件。

其強壯且優雅——針對壞數據的錯誤處理能確保有壞數據時應用程序不會崩潰。你甚至可以通過擴展它來創建自己的圖表類型。

源碼許可證：開源。對所有人免費。

12、jQuery Sparklines

我們一直在談論那些能搞定一切的重量型的庫。但有時你需要的是針對簡單的任務簡單些的東西。jQuery Sparklines 插件提供了一個合適的解決方案。它能夠被用來生成迷你型的小內嵌圖表，剛好足夠去表現趨勢——只需要最小量的編碼。適用于大多數現代瀏覽器包括更老的IE6。

源碼許可證：開源。對所有人免費。

13、Sigma.js

當我們在特定的使用場景下時，我們必須談談 Sigma。Sigma 是一個強大的 JavaScript 庫，其關注于呈現交互圖形和 Web 網絡。

Sigma 的庫和插件包有大量的互動設置。一旦你使用了 Sigma，你將再也不會覺得線圖無聊。看一下這個sigma.js側翻演示你就會明白我的意思。

源碼許可證：開源。對所有人免費。

14、Morris.js

是的，正如 Morris 所說，好看的圖不應該制作困難。Morris 是一個基于 jQuery 和 Raphael 的輕量級庫，它提供簡單干凈的線條，面積圖，條形及圓環圖。如果你正在尋找一些快速簡單且優雅的庫，它絕對值得一試。

源碼許可證：開源。對所有人免費。

15、Cytoscape.js

Cytoscape.js 是一個開源的、功能齊全的圖形庫，它純粹用 JavaScript 編寫，基于 LGPL3+ 并完全免費。經過高度優化之后，它并不依賴外部。Cytoscape.js 可以讓你創建可復用的圖形工具，并能夠集成到你的 JavaScript 代碼中。

它同樣兼容所有現代瀏覽器，還兼容各種軟件框架，比如CommonJS和Node.js，AMD/Require.js，jQuery 以及 Meteor/Atmosphere 等。注意，雖然它與Cyctoscape 桌面應用名字相同，但它們是完全不同的。

源碼許可證：免費。對所有人免費。

16、C3.js

C3.js 是另一個基于 D3 可重用的圖表庫。大量的基于 D3 的圖表工具表明了太多人喜歡 D3 的功能，但也反映了大家討厭用 D3 直接編碼。

C3.js 提供了一種不同于 D3 學習曲線的方法，它將構建整個圖表所需要的代碼進行了包裝。C3允許你創建自定義的類，這樣就可以生成自己的風格。它提供了大量的API和回調，以便你可以在第一次渲染之后更新圖表。

源碼許可證：開源。對所有人免費。

17、Rickshaw

Rickshaw 在 Shutterstock 被開發為一個建時間序列圖的工具包。像其他一些我們已經討論過的工具一樣，Rickshaw 也是基于 D3 庫。它是開放并開源的（遵循 MIT 許可）。

你可以在這里看到一些 Rickshaw 的有趣例子。Rickshaw 的眾多擴展和自定義的特性能夠讓你生成漂亮的時序圖。

源碼許可證：開源。對所有人免費。

18、Cubism.js

Cubism 也許是顯示時間序列最佳的 D3 插件。是什么使它脫穎而出的呢？你可以引入多個來源的數據，比如 Graphite、Cube 和其他來創造令人敬畏的實時圖表來展現你的數據。

它能夠渲染增量，使用 Canvas 來一次一個像素的偏移圖表。Cubism 的水平圖要比標準的平面圖更好地利用垂直空間，能夠讓你一眼下來獲取更多的數據并增加一目了然的可能性。

源碼許可證：開源。對所有人免費。

19、Plottable.js

Plottable 采取了一些不同于 D3 框架的方法。它已經有一套可插拔的模塊化組件，這些組件封裝了渲染邏輯。這形成了一個單獨的布局引擎用來實際定位。

這意味著你可以使用任何 Plottable 的組件并將其添加到現有的圖表，或使用 Plottable 創建一個全新的圖表。它基本以一個更模塊化、即插即用的方式賦予了你 D3 的力量。可以通過這些示例看一下 Plottable 的能力。

源碼許可證：開源。對所有人免費。

20、Canvas.js

正如名字所隱含的，Canvas.js 是一個 HTML5 —— JavaScript 的圖表庫，基于 Canvas 元素。Canvas 允許你創建完全響應式且跨設備的豐富圖表。除此之外，它有許多很好看的主題，他們聲稱要比傳統的基于 Flash 和 SVG 圖型快10倍。

源碼許可證：非商業免費，商業用途收費。

總結

數據的可視化和分析是當今業務流程的的一個重要的組成部分。公司不論大小，都需要簡潔、高效、互動性的方式來詮釋數據。所以選擇適合你需求的 JavaScript 圖表庫尤為重要。

像 FusionCharts，GoogleCharts，Dygraphs 或 D3 的衍生庫可能更適合那些處理大量數據的企業，或那些很大程度上依賴于數據分析的小公司。如果你只需要一些小而快的庫，Morris.js 或 Chart.js 或許更適合你。對于圖形和和網絡，Cytoscape 或 Sigma.js 可能是更好的選擇。

我盡量將最好的工具包括在這里，但我相信你也有你的最愛，你最喜歡的 JS 圖表庫是哪個，為什么？

為一名前端 Web 開發人員，能夠像制作漂亮的交互式網頁一樣多地可視化數據是一項很棒的技能。這些 JavaScript 庫使這項任務變得更容易，因為開發人員不必忍受語言語法的變化就可以將這些神奇的數字轉換為易于理解的圖表。

在本文中，我們討論6個可以提供幫助的庫。

Echarts

Echarts 對于可視化網頁上的數據非常有用。 有了它，你可以創建直觀、可自定義和交互式的圖表，從而更輕松地解釋和分析數據。

許多 JavaScript 圖表庫已被移植到 JavaScript，這意味著它們的使用不會無縫銜接。 但是，Echarts 并非如此，因為它是用純 JavaScript 編寫的。

TauCharts

TauCharts 是目前最靈活的 JavaScript 圖表庫之一，它也是基于 D3 的，是一個以數據為中心的 JavaScript 圖表庫，可以改進數據可視化。TauCharts 允許輕松訪問他們的 API。 為用戶提供無縫映射和可視化數據的機會，以獲得更多驚人的洞察力。

它不僅僅是靈活的，它還可以非?？焖俚爻尸F圖表并且易于學習。

Chart.js

簡單的，干凈的，方便使用。

完美的詞來描述 Chart.js 庫。 Chart.js 庫是一個基于 HTML5 的 JavaScript 庫，用于創建動畫、交互式和可自定義的圖表和圖形。使用 Chart.js，你可以輕松地可視化你的混合圖表類型，默認情況下創建響應式網頁。

該庫允許你快速開始可視化數據。 易于設置，對初學者友好。 有了它，你就不必參與瀏覽器兼容性問題，因為它支持舊版瀏覽器。

Chartist

如果你希望創建美觀、響應迅速、易于閱讀的圖表，Chartist 是你可以使用的庫。Chartist 使用 SVG 來渲染圖表，它還提供了使用 CSS 媒體查詢和創意動畫自定義圖表的功能，你可以把你所有的創造力帶到你的圖表中。

Chartist 非常易于配置，并且易于使用 Sass 進行自定義。 然而，它不像Chart.js 那樣支持舊版瀏覽器。你可以通過使用 CSS 樣式來美化你的 SVG 并創建你想要的所有可愛的動畫。

C3.js

就像 TauCharts 一樣，C3 是另一個非常高效的基于 D3 的圖表可視化庫，另外，它允許你創建可以根據個人喜好輕松定制的課程。

使用此圖表庫，即使在第一次渲染之后，你也可以通過創建回調來更新圖表。使用這個庫很容易找到自己的方法，因為它還允許你為 Web 應用程序創建可重用的圖表，從而減少了要完成的工作。

HighCharts

使用 HighCharts.js 讓你的數據栩栩如生。你可以使用純 JavaScript 創建交互式圖表，當你嘗試將交互式圖表添加到你的 Web 應用程序時，它可以使用 SVG 輕松呈現并與 HTML5 完美配合。

它非常輕量級，因為它不需要任何插件。 這并不比其他圖表庫效率低。 你可以創建任何你能想到的圖表，無論是柱形圖、條形圖、餅圖還是極坐標圖，而無需將內存放在線上。

盡管 HighCharts 非常簡單，但它也與舊瀏覽器非常兼容，因此如果你不需要使用高級圖表樣式表示數據，則可以選擇它。

除了本文中討論的六個庫之外，還有很多其他庫，很難從這些庫中選擇最好的，因為它們都是高質量的庫。

了解更多