摘要：本文是譯文，原文是我在原文的基礎(chǔ)上加了百度的圖表庫，這個也是毫不遜色其他圖表庫的。更新記錄圖表類數(shù)據(jù)驅(qū)動文檔通常被稱為最強(qiáng)大的開源可視化庫。是迄今為止最好的圖表庫。在頂級功能支持，使任何元素可拖動，可旋轉(zhuǎn)或可滑動滾動和快速性能的能力。

本文是譯文，原文是https://da-14.com/blog/top-11...
我在原文的基礎(chǔ)上加了百度的Echats圖表庫，這個也是毫不遜色其他圖表庫的。另外Handsontable電子表格庫也是蠻好玩的。

前端開發(fā)工具在過去幾年中取得了進(jìn)步和成功。這些日子，JS庫和框架可以簡化工作流程，提高開發(fā)過程，并在響應(yīng)式設(shè)計方面提供更好的功能。

考慮到一個長的JavaScript庫列表，它可能是挑戰(zhàn)選擇，那是值得的時間和精力。我們已經(jīng)討論了最好的JavaScript框架，今天我們想研究JS庫中的新星。你可能聽說過像jQuery或React這樣的大名字，這是最有用的JavaScript庫之一，雖然有很多其他解決方案。

一些庫是幾乎必須在每個其他項目應(yīng)用，而其他的更集中和用于執(zhí)行應(yīng)用程序中的特定功能。為了清楚起見，我們按類型分組了最好的JavaScript庫，所以讓我們開始。

更新記錄

20180907 add apexcharts.js、f2、G2

D3.js（數(shù)據(jù)驅(qū)動文檔）通常被稱為最強(qiáng)大的開源JavaScript可視化庫。它的生態(tài)系統(tǒng)包括幾十個插件和其他庫建立在D3js的頂部。同時，支持社區(qū)和大量的文檔可以幫助您立即開始。

D3符合W3C網(wǎng)絡(luò)標(biāo)準(zhǔn)，幾乎支持所有現(xiàn)代瀏覽器。盡管事實上它不包括任何預(yù)先構(gòu)建的圖表，它提供了許多例子和“輸入和退出”選擇，容易的調(diào)試過程和強(qiáng)大的轉(zhuǎn)換等有用的功能。

Chart.js是一個簡單的開源解決方案，用于小項目和這些情況下，當(dāng)你需要快速創(chuàng)建圖表。它有八種圖表類型和混合它們的能力，外加令人驚嘆的動畫選項開箱。強(qiáng)烈建議使用此JavaScript圖形庫，以便簡單的設(shè)置過程，工作靈活性和全面的文檔，盡管其功能相當(dāng)有限。 Chartist.js具有類似的功能，而它是基于SVG，而不是HTML5畫布在Chartjs。

FusionCharts是迄今為止最好的JavaScript圖表庫。作為設(shè)計師和開發(fā)者最全面的解決方案，它包括90多種圖表類型和1000個地圖，將Google圖表和MetricsGraphics保留在后面。

今天FusionCharts可以擁有超過24,000個客戶，其中包括白宮，Oracle，IBM，微軟，谷歌等等。作為最流行的JavaScript庫之一，它是高度可擴(kuò)展的，并與各種設(shè)備和瀏覽器，包括IE 6,7和8兼容。但是，水印版本可以免費(fèi)使用商業(yè)和個人項目，但刪除水印你需要購買許可證。

Google圖表允許您構(gòu)建從純色圖表到復(fù)雜樹形圖的所有內(nèi)容。它配備了廣泛的預(yù)構(gòu)建的圖表庫，各種數(shù)據(jù)工具和多個自定義選項。 HTML5和SVG上的基礎(chǔ)圖表??此庫確?？鐬g覽器和跨平臺兼容性，而對于較舊的IE版本，它包括VML。

由于詳細(xì)的文檔，代碼注釋和分步說明，Google Charts工具可以成為任何人誰想要使用JavaScript構(gòu)建圖表的一個很好的起點。但是，由于文件是從Google的服務(wù)器上傳的，因此您的Web JavaScript應(yīng)用程序應(yīng)該在線以查看圖表。

更小文件 更大作為

更小體積的文件，滿足更輕便的使用需求

更靈活的打包方式，可自由選擇你需要的圖表和組件

移動端強(qiáng)勢來襲

良好的自適應(yīng)效果

專屬的移動端交互體驗

更豐富的可視化效果

新增更多圖表類型，更好的滿足不同數(shù)據(jù)的處理需求 更多的搭配方案讓你的數(shù)據(jù)呈現(xiàn)方式更個性和完美

交互式SVG圖表 https://github.com/apexcharts...

相比于Echars, apexcharts顯得更加漂亮且小清晰

G2 是一套基于可視化編碼的圖形語法，以數(shù)據(jù)驅(qū)動，具有高度的易用性和擴(kuò)展性，用戶無需關(guān)注各種繁瑣的實現(xiàn)細(xì)節(jié)，一條語句即可構(gòu)建出各種各樣的可交互的統(tǒng)計圖表。 https://github.com/antvis/g2

簡介優(yōu)雅的移動端圖表庫 https://github.com/antvis/f2

GSAP（GreenSock動畫平臺）是一個先進(jìn)的動畫解決方案，由全球最大的企業(yè)使用創(chuàng)建驚人的互動動畫，沒有麻煩。它被超過200萬網(wǎng)站雇用，在他們的客戶中，你可以找到像福特，耐克，Adobe，微軟，三星和許多其他的偉大的名字。

GSAP與新舊瀏覽器以及移動設(shè)備高度兼容。在頂級功能SVG支持，使任何DOM元素可拖動，可旋轉(zhuǎn)或可滑動滾動和快速性能的能力。它還帶有定向旋轉(zhuǎn)，3D變換，模塊化架構(gòu)，快速加載，零依賴性等等。

Bounce.js是一個整潔的JavaScript動畫庫，使您能夠創(chuàng)建有吸引力的CSS3動力的動畫，像餅圖一樣簡單。它有10個預(yù)設(shè)，如旋轉(zhuǎn)，旋風(fēng)，果凍，公路跑步者和其他人，以生成平滑的動畫，任何網(wǎng)頁設(shè)計或自定義項目。

這個庫是絕對免費(fèi)的和MIT許可的，它是一個不錯的選擇，在那些情況下，當(dāng)你不需要一個長列表的動畫類型，尋找實驗或只是嘗試你的手在動畫。

Animate.css是一個平滑的CSS庫，允許您添加整潔的動畫到所選對象。它具有超過50種不同的預(yù)設(shè)，可以應(yīng)用于文本，形式，對象和CSS3的圖片。由于小文件大小，跨瀏覽器支持和易于使用它可以是一個非常適合移動項目，滑塊，主頁等。

Moment.js是一個簡單和輕量級的日期庫，使解析，操作和格式化日期和時間容易和準(zhǔn)確。它具有多語言支持，持續(xù)時間，日歷時間和各種插件，以獲得諸如時區(qū)支持，Twitter集成等功能。但重要的是，它消除了使用本機(jī)JavaScript日期對象的需要，隨后促進(jìn)復(fù)雜解析過程和減少代碼量。

Date-fns是一個高級工具集，用于在瀏覽器和Node.js中操作時間和日期。它提供了140多個有用的功能，可以通過簡單的API輕松訪問。由于模塊化結(jié)構(gòu)，它允許您只選擇您當(dāng)前需要的項目的那些功能。

Math.js是JavaScript引擎的開源數(shù)學(xué)庫。它有許多函數(shù)和常量，靈活的表達(dá)式解析器，以及支持復(fù)雜和大數(shù)字，單位，字符串，分?jǐn)?shù)，矩陣，數(shù)組和符號計算。

Handsontable是一個無障礙的JavaScript電子表格庫用于構(gòu)建一流的Web應(yīng)用程序。它可以輕松地擴(kuò)展和修改與自定義插件。由開發(fā)人員為開發(fā)人員建造，它確?？焖俸腿菀椎拈_始，方便的模塊化結(jié)構(gòu)和活躍的社區(qū)支持。這個表庫包括超過30個功能的免費(fèi)版本和額外的10+功能的專業(yè)版。目前Handsontable用于銷售報告，人力規(guī)劃，數(shù)據(jù)合并，數(shù)據(jù)庫編輯等領(lǐng)域。

掃碼訂閱我的微信公眾號：洞香春天。每天一篇技術(shù)短文，讓知識不再高冷。