12個值得關注的頂級可視化JS庫 涉及圖表、動畫、時間處理，表格操做

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

前端開發工具在過去幾年中取得了進步和成功。這些日子，JS庫和框架能夠簡化工做流程，提升開發過程，並在響應式設計方面提供更好的功能。

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

一些庫是幾乎必須在每一個其餘項目應用，而其餘的更集中和用於執行應用程序中的特定功能。爲了清楚起見，咱們按類型分組了最好的JavaScript庫，因此讓咱們開始。

更新記錄

• 20180907 add apexcharts.js、f二、G2

1 圖表類

1.1 D3

D3.js（數據驅動文檔）一般被稱爲最強大的開源JavaScript可視化庫。它的生態系統包括幾十個插件和其餘庫創建在D3js的頂部。同時，支持社區和大量的文檔能夠幫助您當即開始。

D3符合W3C網絡標準，幾乎支持全部現代瀏覽器。儘管事實上它不包括任何預先構建的圖表，它提供了許多例子和「輸入和退出」選擇，容易的調試過程和強大的轉換等有用的功能。

1.2 Chart.js

Chart.js是一個簡單的開源解決方案，用於小項目和這些狀況下，當你須要快速建立圖表。它有八種圖表類型和混合它們的能力，外加使人驚歎的動畫選項開箱。強烈建議使用此JavaScript圖形庫，以便簡單的設置過程，工做靈活性和全面的文檔，儘管其功能至關有限。 Chartist.js具備相似的功能，而它是基於SVG，而不是HTML5畫布在Chartjs。

1.3 FusionCharts

FusionCharts是迄今爲止最好的JavaScript圖表庫。做爲設計師和開發者最全面的解決方案，它包括90多種圖表類型和1000個地圖，將Google圖表和MetricsGraphics保留在後面。

今天FusionCharts能夠擁有超過24,000個客戶，其中包括白宮，Oracle，IBM，微軟，谷歌等等。做爲最流行的JavaScript庫之一，它是高度可擴展的，並與各類設備和瀏覽器，包括IE 6,7和8兼容。可是，水印版本能夠無償使用商業和我的項目，但刪除水印你須要購買許可證。

1.4 Google Charts

Google圖表容許您構建從純色圖表到複雜樹形圖的全部內容。它配備了普遍的預構建的圖表庫，各類數據工具和多個自定義選項。 HTML5和SVG上的基礎圖表​​此庫確保跨瀏覽器和跨平臺兼容性，而對於較舊的IE版本，它包括VML。

因爲詳細的文檔，代碼註釋和分步說明，Google Charts工具能夠成爲任何人誰想要使用JavaScript構建圖表的一個很好的起點。可是，因爲文件是從Google的服務器上傳的，所以您的Web JavaScript應用程序應該在線以查看圖表。

1.5 Echarts（百度出品）

• 更小文件 更大做爲

  • 更小體積的文件，知足更輕便的使用需求
  • 更靈活的打包方式，可自由選擇你須要的圖表和組件

• 移動端強勢來襲

  • 良好的自適應效果
  • 專屬的移動端交互體驗

• 更豐富的可視化效果

  • 新增更多圖表類型，更好的知足不一樣數據的處理需求 更多的搭配方案讓你的數據呈現方式更個性和完美

1.6 apexcharts.js

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

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

1.7 G2 （螞蟻金服 - 體驗技術部 - 數據可視化）

G2 是一套基於可視化編碼的圖形語法，以數據驅動，具備高度的易用性和擴展性，用戶無需關注各類繁瑣的實現細節，一條語句便可構建出各類各樣的可交互的統計圖表。 https://github.com/antvis/g2

1.8 f2 （螞蟻金服 - 體驗技術部 - 數據可視化）

簡介優雅的移動端圖表庫 https://github.com/antvis/f2

2 動畫

2.1 GSAP

GSAP（GreenSock動畫平臺）是一個先進的動畫解決方案，由全球最大的企業使用建立驚人的互動動畫，沒有麻煩。它被超過200萬網站僱用，在他們的客戶中，你能夠找到像福特，耐克，Adobe，微軟，三星和許多其餘的偉大的名字。

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

2.2 Bounce.js

Bounce.js是一個整潔的JavaScript動畫庫，使您可以建立有吸引力的CSS3動力的動畫，像餅圖同樣簡單。它有10個預設，如旋轉，旋風，果凍，公路跑步者和其餘人，以生成平滑的動畫，任何網頁設計或自定義項目。

這個庫是絕對免費的和MIT許可的，它是一個不錯的選擇，在那些狀況下，當你不須要一個長列表的動畫類型，尋找實驗或只是嘗試你的手在動畫。

2.3 Animate.css

Animate.css是一個平滑的CSS庫，容許您添加整潔的動畫到所選對象。它具備超過50種不一樣的預設，能夠應用於文本，形式，對象和CSS3的圖片。因爲小文件大小，跨瀏覽器支持和易於使用它能夠是一個很是適合移動項目，滑塊，主頁等。

3 時間日期

3.1 Moment.js

Moment.js是一個簡單和輕量級的日期庫，使解析，操做和格式化日期和時間容易和準確。它具備多語言支持，持續時間，日曆時間和各類插件，以得到諸如時區支持，Twitter集成等功能。但重要的是，它消除了使用本機JavaScript日期對象的須要，隨後促進複雜解析過程和減小代碼量。

3.2 Date-fns

Date-fns是一個高級工具集，用於在瀏覽器和Node.js中操做時間和日期。它提供了140多個有用的功能，能夠經過簡單的API輕鬆訪問。因爲模塊化結構，它容許您只選擇您當前須要的項目的那些功能。

4 其餘

4.1 Math.js

Math.js是JavaScript引擎的開源數學庫。它有許多函數和常量，靈活的表達式解析器，以及支持複雜和大數字，單位，字符串，分數，矩陣，數組和符號計算。

4.2 Handsontable

Handsontable是一個無障礙的JavaScript電子表格庫用於構建一流的Web應用程序。它能夠輕鬆地擴展和修改與自定義插件。由開發人員爲開發人員建造，它確保快速和容易的開始，方便的模塊化結構和活躍的社區支持。這個表庫包括超過30個功能的免費版本和額外的10+功能的專業版。目前Handsontable用於銷售報告，人力規劃，數據合併，數據庫編輯等領域。

掃碼訂閱個人微信公衆號：洞香春天。天天一篇技術短文，讓知識再也不高冷。