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

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

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

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

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

更新記錄

20180907 add apexcharts.js、f2、G2

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

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

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

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

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

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

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

更小文件 更大作為

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

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

移動(dòng)端強(qiáng)勢(shì)來(lái)襲

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

專屬的移動(dòng)端交互體驗(yàn)

更豐富的可視化效果

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

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

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

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

簡(jiǎn)介優(yōu)雅的移動(dòng)端圖表庫(kù) https://github.com/antvis/f2

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

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

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

這個(gè)庫(kù)是絕對(duì)免費(fèi)的和MIT許可的，它是一個(gè)不錯(cuò)的選擇，在那些情況下，當(dāng)你不需要一個(gè)長(zhǎng)列表的動(dòng)畫(huà)類(lèi)型，尋找實(shí)驗(yàn)或只是嘗試你的手在動(dòng)畫(huà)。

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

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

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

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

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

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