前端開發者常用的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
前端開發者常用的9個JavaScript圖表庫