2019年最好用的JavaScript圖表庫

2019年最好用的JavaScript圖表庫

做者 | Saurabh Barot

譯者 | 王強編輯 | Yonie

大數據時代，收集和使用數據的需求正在爆發式增加，數據可視化也變得越發重要。開發人員在千方百計將不一樣數據庫中的記錄整合到儀表板和漂亮的圖表中，向人們快速直觀地展現信息。

在過去十年中數據可視化技術不斷改進，結果涌現了不少高水平的圖表庫。

21 世紀初期，人們使用服務端圖像位圖來生成圖表。那時像 Silverlight 和 Flash 這樣的插件提供了豐富的交互式圖表體驗，代價是減小電池壽命、拖慢下載速度並耗費更多系統資源。

移動設備興起以後，移動平臺再也不支持插件並開始轉向開放客戶端技術，這些技術能夠在任何平臺上運行，成爲了開發人員的首選。同時，觸摸手勢縮放和很是高分辨率的屏幕開始流行，使得無關分辨率的矢量圖表廣受歡迎。

隨之而來的就是數據可視化的時代，SVG 可擴展矢量圖像和 JavaScript 成爲主角。今天的圖表技術可支持全部瀏覽器平臺，支持交互性和動畫，而且不須要特殊的插件。這些圖表在高分辨率設備中也有很好的顯示效果。咱們能夠在 JS 開發中使用許多 JavaScript 圖表庫實現這些目標。

市面上有不少 JavaScript 圖表庫，本文則列出了其中的幾款佼佼者，能夠用在你的新項目中。

如下就是 2019 年的頂級 Javascript 圖表庫名單。

D3.js

D3.js（https://d3js.org/）是一個圖形 JavaScript 庫，功能衆多，十分強大。你能夠用它對文檔作數據驅動的轉換，而後將任意數據綁定到 DOM 上。

D3 是很是優秀的圖表庫。它有一些較小的技術模塊，如顏色、軸、輪廓、層次結構、多邊形、緩動等。這也意味着你須要學習不少知識才能用好它，上手並不容易。

即便用它建立簡單的圖表也可能須要複雜的步驟。你須要明肯定義包含圖表項和軸在內的全部元素。它提供了一些示例，教你如何使用 CSS 來設置圖表元素的樣式。開發者沒法自動應用基於圖表的功能。

若是你想從零開始設計複雜的圖表，徹底按照本身的想法控制全部元素，那麼這個庫就是你的首選。但若是時間緊迫，從頭開始解決數據可視化項目需求可能就不是什麼好主意了。

做爲圖表庫來講，D3.js 能夠充當構建塊。開發者能夠用 D3 與 NVD3 一類的方案配合工做。這個圖表庫徹底免費並開源。

Highcharts

Highcharts（https://www.highcharts.com/）是市面流行的 JavaScript 圖表庫之一，並被許多大公司採用。爲了提供對 IE6 到 IE8 的兼容性，它先使用 SVG 而後轉向 VML 來生成圖表。它的示例圖表帶有一些很棒的功能，但看起來不怎麼吸引人。它的文檔裏有不少 API 文檔教程和相關主題。

它的 API 易於使用，開發者可使用配置選項來開發圖表。對於我的和非商業用途，Highcharts 可無償使用；證券行業等用途須要商業許可，而甘特圖和地圖圖表則須要單獨的許可證。

Chart.js

Chart.js（https://www.chartjs.org/）是一個開源 JavaScript 庫，支持 8 種類型的圖表。它只有 60kb，是一個很是小的 JS 庫。它支持的圖表類型包括雷達、內聯圖表、餅圖、條形圖、散點圖、面積圖、氣泡和混合等。它還支持時間序列。在呈現層面，它使用 canvas 元素並能響應窗口大小調整縮放比率。它對 IE9 向後兼容。要兼容 IE7 的話也可使用 Polyfills。

初次使用它的示例時還能看到現代感的初始動畫。實時添加數據點或序列時有平滑的動畫效果。你能夠調用 update() 函數來修改圖表選項並重繪圖表。

在它的網站中沒有展現示例源代碼，但能夠在 GitHub 倉庫中找到。它的 API 簡潔直觀。用戶使用配置選項來建立和修改圖表。它的文檔內容翔實，附帶代碼片斷和屬性 API 的教程。

這個庫可免費用於商業和我的用途。它是開源項目。但對於更高級別的需求來講，它提供的圖表類型可能有點少。

amCharts

amCharts（https://www.amcharts.com/）已經推出了第 4 版，歷史也挺長了。此版本支持 SVG 動畫引擎，可幫助開發人員建立電影級場景。

它的示例圖表很是漂亮，大多數示例都提供了滑塊 UI，還附帶許多調節器能夠實時調整圖表的變量。它的文檔包括完整的 API 屬性描述和許多教程。它提供了一個聲明性 API 來建立圖表，與基於配置的方法略有不一樣。它有很好的代碼自動完成功能，但在配置圖表時須要的代碼略多。amCharts 的水印版圖表是免費的，去掉水印須要付費。

谷歌圖表

谷歌圖表（https://developers.google.com/chart/）功能強大，易於使用。其示例圖表簡潔易讀。能夠在它的圖表庫和擴展庫中找到許多圖表類型。經過層疊菜單能夠查看更多圖表類型。

每種圖表類型都有附帶動態實例和很容易看懂的專門教程。這些教程附帶 API 列表，幷包含相關功能的代碼。它爲新人提供了很是愉快的入門體驗。。

用戶可使用配置選項對象來自定義圖表。DataTable 類用來填充數據集，也能夠用在全部圖表裏。每種圖表類型都帶有以獨特方式列出的選項和對應的教程。可選項不少，適用於不一樣類型，而屬性命名是標準化的。

谷歌圖表能夠無償使用，但也有一些侷限。它是一個 Web 服務，不能在本地託管。谷歌還退役了不少 API，因此它不適合用在關鍵項目中。

ZingChart

ZingChart（https://www.zingchart.com/）中有許多圖表類型，能與 react、angular 等框架集成。它有一系列強大的功能和許多自定義選項。

它的示例圖表有許多樣式主題，其中一些看着很不錯。還有許多選項能夠用來添加樣式。示例圖表沒有覆蓋它支持的全部圖表類型。

它的文檔附帶了許多功能教程，覆蓋了全部類型的圖表和所有 API。ZingChart 使用配置選項自定義圖表。示例中有不少屬性設置，如字體樣式等。但這些帶有屬性設置的示例可能會讓用戶糊塗，不知道圖表到底須要哪些設置。

ZingChart 的水印版能夠無償使用。付費版沒有水印。

FushionCharts

FusionCharts 最開始是基於 Flash 的圖表插件，有着很長的歷史。它是一個健壯的圖表可視化庫，提供對現代瀏覽器的支持，支持包括 JavaScript、JSON 和 XML 在內的許多數據格式，還兼容 IE6。它還支持許多服務端編程語言和 JavaScript 框架。

它的圖表庫附帶了許多看上去簡潔大方的示例。它的文檔帶有許多良好的 API 描述，並且每種圖表類型都有示例。用戶能夠經過任務和圖表功能分組配置屬性。

用戶使用基於配置的選項建立圖表，用起來很是簡單。深刻研究 API 時會發現屬性列表變得很長。showAlternateHGridColor、chartLeftMargin 等配置屬性很好理解。它的代碼自動完成功能還有改進的空間。

FusionCharts 的水印版可供我的無償使用。商業和非水印版本須要付費。

Flot

Flot（https://www.flotcharts.org/）用法簡單、外觀漂亮，交互功能豐富，是最優秀的純 JavaScript 繪圖庫。它有效兼容全部新式瀏覽器，包括 Internet Explorer 6 +、Chrome、Firefox 2 +、Safari 3+ 和 Opera 9.5+ 等。它是最流行、歷史最長的圖表庫。Flot 支持線、點、填充區域、條形以及它們的各類組合。

Flot 的工做機制是建立一個能夠放入圖表的佔位符 div。

Sigmajs

這款產品能夠用來建立一些漂亮的圖形來在 Web 上顯示網絡，並在大型 Web 應用中展現簡單的交互式網絡；這種交互式網絡具備動態探索功能。不管對初學者仍是高級用戶來講它都很好用。

它配備了一些使人興奮的功能，如 Canvas 和 WebGL 渲染器，還有鼠標和觸摸支持，幫助你製做更好的動態網絡應用。

Sigmajs（http://sigmajs.org/）默承認配置，支持鼠標和觸摸兩種交互，並能夠根據容器大小變化縮放顯示。它還有自定義渲染，能夠用一組工具和設置來定製網絡的交互細節。

  小結  

JavaScript 圖表庫生態正在不斷髮展壯大。市面上能找到大量圖表製做產品，能夠知足多種多樣的項目需求。大多數產品都提供了免費試用機會，方便用戶評估。

英文原文：https://aglowiditsolutions.com/blog/top-javascript-chart-libraries/