前端開發人員常用的9個JavaScript圖表庫

標籤：htm   高品質   asc   快速   可視化   文章   部分   性問題   簡單   

當前，資料視覺效果已經成為資料科學領域非常重要的一部分。不同網路系統中產生的資料，都需要經過適當的可視化處理，以便更好的呈現給使用者讀取和分析。

對任何一個組織來說，如果能夠充分的擷取資料、可視化資料和分析資料，那麼就能很大程度上協助瞭解資料產生的深層次原因，以便據此做出正確的決定。

對於前端開發人員來說，如果能夠掌握互動式網頁中的資料視覺效果技術，則是一項很棒的技能。當然，通過一些 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圖表庫