前端開發者經常使用的9個JavaScript圖表庫

當前，數據可視化已經成爲數據科學領域很是重要的一部分。不一樣網絡系統中產生的數據，都須要通過適當的可視化處理，以便更好的呈現給用戶讀取和分析。

對任何一個組織來講，若是可以充分的獲取數據、可視化數據和分析數據，那麼就能很大程度上幫助瞭解數據產生的深層次緣由，以便據此作出正確的決定。

對於前端開發人員來講，若是可以掌握交互式網頁中的數據可視化技術，則是一項很棒的技能。固然，經過一些 JavaScript 的圖表庫也會使前端的數據可視化變得更加容易。使用這些庫，開發者能夠在無需考慮不一樣的語法所帶來的編程難題的狀況下，輕鬆實現將數據轉化爲易於理解的圖表。

下面是挑選出的 9 個 JavaScript 圖表庫:

Chart.js

Chartist

FlexChart

Echarts

NVD3

C3.js

TauCharts

ReCharts

Flot

Chart.js

Chart.js 是一種簡潔、用戶友好的圖表庫，同時也是基於 HTML5 的 JavaScript 庫，用於建立動畫、交互式和可自定義的圖表和圖形。

藉助 Chart.js，用戶能夠輕鬆直觀地查看混合圖表類型。默認狀況下，也可使用 Chart.js 建立響應式網頁。

Chart.js 庫容許用戶快速建立可視化數據。Chart.js 易於設置，對初學者十分友好。使用 Chart.js 則沒必要考慮瀏覽器的兼容性問題，由於 Chart.js 支持舊瀏覽器。

使用 npm 安裝 Chart.js:

npm install chart.js --save

Chart.js 繪製雷達圖的代碼示例:

Chartist

Chartist 庫很適合於建立美觀、響應能力強、閱讀友好的圖表。Chartist 使用 SVG 來呈現圖表。

Chartist 還提供了使用 CSS 媒體查詢和創意動畫來自定義圖表的能力。用戶使用 Chartist 在圖表設計中實現本身的全部創意。

Chartist 易於配置，也易於使用 Sass 進行定製。可是，它不支持舊瀏覽器。

使用 Chartist，能夠經過 CSS 的樣式來美化你的 SVG，用戶徹底能夠現實本身所想的全部圖表樣式。

使用 npm 安裝 Chartist:

npm install chartist --save

Chartist 建立具備自定義標籤的餅圖的代碼示例:

FlexChart

FlexChart 是高性能的圖表工具。使用 FlexChart，可輕鬆的將表格數據可視化爲業務圖表。FlexChart 不但支持常見的圖表類型，如折線圖、餅狀圖、面積圖等，還支持氣泡圖、K線圖、條形圖、漏斗圖等高級圖表類型。

FlexChart 的使用也十分簡單，FlexChart 圖表將全部與數據有關的任務都委託給 CollectionView 類，只需操做 CollectionView 類，就能實現過濾、排序和分組數據等功能。

FlexChart 包含的圖表元素也比較全面，如圖表圖例、圖表標題、圖表頁腳、數軸、圖表 series 和標籤等，用戶也能夠爲圖表添加自定義的元素，如平均線和趨勢線等。

FlexChart 本質上是一種交互式的圖表，不管是數據進行任何的更改，都會自動反應在圖表上，如圖表曲線隨數據放大縮小、過濾、鑽取、動畫等。

FlexChart 繪製柱狀圖的代碼示例:

Echarts

Echarts 是網頁的數據可視化方面的一個很是有用的庫。使用 Echarts，開發者能夠建立直觀的、可自定義的交互式圖表，讓數據的展現和分析變得十分容易。

因爲 Echarts 是用普通的 JavaScript 編寫的，因此 Echarts 不存在其它圖表庫存在的沒法無縫遷移的問題。

同時，Echarts 也提供了不少官方文檔供用戶查看。

使用 npm 能夠很容易的完成 Echarts 的安裝:

npm install echarts --save

Echarts 繪製散點圖代碼示例:

NVD3

NVD3 是由 Mike Bostock 撰寫的基於 D3 的 JavaScript 庫。NVD3 容許用戶在 Web 應用程序中建立美觀的、可複用的圖表。

NVD3 具備很強大的圖表功能，可以很方便的建立箱形圖、旭日形和燭臺圖等。若是用戶想在 JavaScript 圖表庫中用到大量的能力，推薦試用 NVD3

NVD3 圖表庫的速度有時可能會成爲一個問題，與 Fastdom 安裝配合使用，速度會更快。

NVD3 繪製簡單的折線圖代碼示例:

C3.js

與 TauCharts 相同，C3.js 也是一個很是有效的基於 D3 的圖表可視化庫。另外，C3.js 容許用戶建立可定製的具備我的風格的類。

C3.js 看起來是個比較難的庫，可是一旦掌握了 C3.js 技巧，就能駕輕就熟的使用了。

有了 C3.js 圖表庫，即便在第一次渲染以後，用戶也能夠經過建立回調來更新圖表。C3.js 也容許用戶爲本身的 Web 應用程序建立可複用的圖表，從而減小工做量。

使用 npm 安裝 C3.js 圖表庫:

npm install c3

C3.js 繪製組合圖的代碼示例:

TauCharts

TauCharts 是最靈活的 JavaScript 圖表庫之一。它是基於 D3 建立的，是一個以數據爲中心的 JavaScript 圖表庫，能夠改進數據可視化的效果。

TauCharts 十分靈活，訪問其 API 也十分輕鬆。TauCharts 爲用戶提供了無縫映射和可視化的數據，使用 TauCharts 可以設計出十分美觀的數據界面。同時，TauCharts 也和易於學習。

經過 npm 安裝 TauCharts:

npm install taucharts

TauCharts 繪製水平線的代碼示例:

Recharts

ReCharts 是一個使用 React 構建的，基於 D3 的圖表庫。

使用 ReCharts，用戶能夠在 React Web 應用程序中無縫地編寫圖表。

Recharts 很是輕巧，並使用 SVG 元素來建立很奇特的圖表。

使用 npm 安裝 Recharts:

npm install recharts

Recharts 沒有冗長的文檔，它很直接。當你遇到困難時，使用 Recharts 能夠很容易找到解決方案。

Recharts 建立自定義內容樹圖的代碼示例:

Flot

目前，jQuery 已經成爲 Web 開發人員很是重要的工具。有了 Flot.js，前端設計也變得更加容易。

Flot.js 是 JavaScript 庫中較爲古老的圖表庫之一。儘管如此，Flot.js 也不會由於繪製折線圖、餅圖、條形圖、面積圖、甚至堆疊圖表而下降其性能。

Flot.js 有一個很完善的文檔。當用戶遇到困難時，能夠很容易地找到解決辦法。Flot.js 也支持舊版本的瀏覽器。

能夠選擇不使用 npm 來安裝 Flot.js，而是在 HTML5 中包含 jQuery 和 JavaScript 文件。

Flot.js 的基本用法代碼示例:

總結

以上介紹的 JavaScript 庫都是高質量的圖表庫。可是在學習這些庫的過程當中，可能會由於學習曲線陡峭或是缺少學習資料而遇到困難，一種很好的方案是將這些庫結合起來使用。最後也歡迎你們補充更多的 JavaScript 圖表庫。

參考文章:https://dzone.com/articles/top-9-javascript-charting-libraries