JavaScript 圖表庫：13 個熱門選擇

#1 – Chart.js

Chart.js 是一個實用的圖表庫，它使用 HTML5 的<canvas>來呈現圖表。

該庫很容易成為簡單項目的首選，因為它默認是響應式的，您還可以根據用戶行為應用動畫效果。

以下是您可以使用 Chart.js 創建的 8 種圖表類型：

• 面積圖
• 條形圖
• 氣泡圖
• 甜甜圈和餅圖
• 折線圖
• 混合圖表類型
• 極地區域圖
• 雷達圖

就易用性而言，語法很簡單，即使您以前從未使用過 JavaScript，創建新圖表也很簡單。

 const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };

如果您想使用動態函數和數據池擴展圖表，該庫有一個插件系統，您可以使用它來添加新功能。

Chart.js 示例

請參閱 Sven (@hofmannsven) 在 CodePen 上的 Pen Proof of concept：Chart.js with Background Gradient。

Chart.js 其他資源

• Chart.js + Next.js = 美麗的數據驅動儀表板
• Chart.js 入門； 基於任務的學習

#2 – D3.js

首先讓我說D3 是一種數據可視化工具，而不是傳統的圖表庫。

D3 允許您指定數據集並將其綁定到 DOM，然後您可以使用庫函數將該數據轉換為獨特的可視化表示。 至於視覺呈現，D3 利用 HTML 表格、SVG 和<canvas>在頁面上呈現數據。

如果您曾經見過其中一個帶有多個交互式數據點的基於地理的旋轉地球儀，那麼該演示文稿很可能是使用 D3 構建的。 但是，它也適用於實際用途，例如您可以在下面的演示中看到的基本圖表。 最後，您需要參考 D3 的官方教程部分來探索其更複雜的功能。

D3.js 示例

請參閱 CodePen 上 Web Dev (@ronaldmarin) 的 Pen D3 Chart + ReactJS。

D3.js 附加資源

• D3.js 教程
• 構建 D3.js 日曆熱圖

#3 – Apache ECharts

Apache ECharts 如此受歡迎的原因之一是您可以直接訪問數百個預製圖表示例。 您可以通過訪問示例目錄自行檢查。 本頁涵蓋了線條、條形圖、餅圖、散點圖、熱圖、圖形等類別中的圖表和示例。

而且，每個示例都包含 JavaScript 和 TypeScript 代碼示例。 但這還不是全部，使用這個庫還有一些實際的好處。 這裡有幾個：

• 數據流。 想要創建包含數百萬個數據點的交互式圖表？ ECharts 使用 WebSockets 流式傳輸數據，因此即使是非常大的數據集也可以異步加載。
• 移動友好。 當用戶在他們的移動設備上查看 EChart 時，圖表本身已經過優化以提供交互功能——縮放、平移和 SVG 渲染，以確保最佳交付性。
• 動態數據。 您可以為 ECharts 提供多個（單獨的）數據點，該庫將自動為圖表設置動畫，為用戶提供交互體驗。
• 可訪問性。 Apache ECharts（v4.0 及更高版本）遵循 WAI-ARIA 指南構建。

您還可以使用外部 CDN 在您的網站上顯示圖表。

Apache ECharts 示例

請參閱 Vale (@vsigno) 在 CodePen 上的 Pen Apache Echart 示例。

Apache ECharts 其他資源

• 在一周內構建更好的 GitHub Insight 工具

#4 – 劇情

Plotly 是 Dash 的母公司，Dash 是一種用於數據應用程序部署的低代碼解決方案。 他們在現場開發了自己的圖形庫——Plotly 。

使用 Plotly，您可以創建最基本的圖表可視化，但該庫的真正強大之處在於能夠生成基於統計的圖表、3D 數據表示和基於財務數據的圖表。

它既可以作為 Node.js 模塊使用，也可以直接從 CDN 使用。

情節示例

請參閱 CodePen 上的 plotly (@plotly) 對單擊事件添加註釋。

#5 – 冰沙

Frappe 圖表庫是由創建 Frappe 框架的人製作的。 這個庫非常簡單。 而這種簡單性是圖書館受歡迎的一個主要因素。

該庫不需要外部依賴，只需幾行代碼即可呈現適合移動設備的 SVG 圖表。 這是基本軸圖的代碼示例：

 data = { labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [ { values: [18, 40, 30, 35, 8, 52, 17, -4] } ] } new frappe.Chart( "#chart", { data: data, type: 'bar', height: 180, colors: ['red'] });

這個小片段將轉換為這樣的圖表：

如果您計劃實時更新數據或導出數據，還支持混合圖表（多個圖表合二為一）、註釋、熱圖和 API。

冰沙示例

請參閱 Jang Rush (@weakish) 在 CodePen 上的 Pen Frappe Hello World。

#6 – ApexCharts

ApexCharts 是一個非常傳統的圖表庫。 ApexCharts 和 Frappe 之間的主要區別（例如）是 ApexCharts 提供了更多的演示。 但是，它還為 React、Vue 和 Angular 等流行框架提供原生支持。 這也意味著所有的演示圖表都有各自的樣本，這些樣本都是用上述框架的語法編寫的。

至於功能，所有圖表均以 SVG 格式生成，並且默認對移動設備友好。 您還可以利用流暢的動畫和註釋等功能，並通過選擇 10 種示例樣式中的一種來自定義圖表主題調色板。

ApexCharts 示例

請參閱 CodePen 上 ApexCharts (@apexcharts) 的 Pen Realtime Dashboard。

#7 – G2

我最近多次談到 Ant Design，包括在我關於 React.js 和 Vue 的組件庫的文章中。 Ant 不僅在 GitHub 上非常受歡迎，而且世界各地的社區都喜歡它們。

G2 圖表庫（或者他們稱之為“可視化語法”）是 Ant Design 使用 Ant Design System 實現的圖表系統。 我強烈建議您查看 AntV 主頁，在那裡您可以找到許多與實時數據可視化相關的其他庫。

它最常用於構建管理儀表板、創建數據路徑以及使用其渲染引擎製作交互式數據可視化示例。 該引擎可以通過 WebGL、Canvas 和 SVG 渲染圖表和數據向量。 而且由於該庫是可插拔的，您可以通過更強大的庫（如 D3.js（我們之前看到））進一步增強您的圖表演示。

#8 – 粗略可視化

Jared Wilber 的 roughViz 庫是 3 個不同庫的組合：D3.js、Rough.js 和 Handy——手繪草圖處理器。 從上面的示例屏幕截圖中可以看出，這不是典型的圖表庫。 roughViz 完全是為了幫助您使用 JavaScript 創建手繪草圖樣式的圖表而構建的。

這種類型的圖書館將成為個人項目的重要補充，換句話說，這些項目需要比傳統的專業風格方法更具創造性的火花。 語法本身盡可能簡單，非常符合 Frappe 和 ApexCharts 之類的。

您可以在下面的演示中親自看到這一點。

粗略的例子

請參閱 Danny Englishby (@DanEnglishby) 在 CodePen 上的 Pen RoughViz 演示。

#9 – 輕量級圖表

如果您正在從事與金融相關的項目（或與此相關的加密貨幣），很明顯，前面提到的許多圖表庫都不會削減它。 因此，這裡是輕量級圖表——一個專門為顯示基於財務的圖表和圖形而構建的圖表庫。

這個庫不僅是開源的和輕量級的，而且它還包含了顯示有關財務及其動態結構的圖表數據所需的所有必要功能。

其中一項功能是數據流，它允許您將實時數據傳遞到畫布，然後在用戶無需刷新頁面的情況下對其進行更新。 您可能要考慮的另一個因素是性能，正如該庫主頁上所解釋的那樣，這應該不是問題，

“我們的圖表解決方案從一開始就設計用於處理龐大的數據陣列。 即使有數千條柱線，即使每秒多次更新新的報價，圖表也能保持響應和靈活。”

查看下面的演示以了解它，以及許多圖表選項和功能。

輕量級圖表示例

請參閱 truong (@truong160196) 在 CodePen 上的 Pen tradingview 高級圖表。

輕量級圖表其他資源

• 您的應用程序的財務圖表

#10 – 廣告牌

Billboard 是一個基於 D3 的界面圖表庫。 它具有您所期望的所有現代功能——SVG 渲染、對移動設備的觸控支持、簡單的界面和出色的 API 文檔。

然而，我最喜歡的功能，也可以說是其他許多人最喜歡的功能是，Billboard 提供了 230 多個可以使用此庫創建的圖表示例。 這些示例分為基本、軸、數據、網格、交互、區域等圖表類別。

這意味著您不僅可以為您的項目及其要求找到正確的圖表類型，還可以探索其他選項並查看特定示例是否引起了您的注意。

Billboard.js 示例

請參閱 CodePen 上 DTCC (@dtcc) 的 Pen Chart Requests – Billboard.js。

#11 – 透視

Perspective 是 FINOS（Open-Source Fintech）運營的項目之一，FINOS 本身也是 Linux 基金會的一部分。 就像輕量級圖表一樣——Perspective.js 旨在為基於財務的項目提供圖表解決方案。 但是，它的功能遠不止於此，並且在與電子商務、數據網格和貨運細分相關的項目中經常使用。

如果您曾經看過有關 Covid-19、機場和奧運會等重大體育賽事的圖表，那麼界面和數據流集成很有可能是通過 Perspective 完成的。 它具有豐富的用戶界面，針對數據流和復雜的實時分析進行了優化。

它適用於 JavaScript 和 Python 開發人員，並使用自定義元素 Web 組件。

#12 – Toast UI 圖表

如果有的話，就圖表樣式及其設計而言，Toast UI 圖表庫是另一個需要考慮的選擇。 這裡的功能與我們已經看過的庫非常相似。

我認為 Toast UI 與其他選擇的不同之處在於它的 API 規範。 它可能是您可以獲得的更好的 API 之一，並且它附帶免費的深入文檔。 API 功能之一是Instances ，這是一種讓您動態更改圖表數據的方法，因為您的數據源已更改，或者因為用戶輸入。

Toast 支持的圖表類型包括條形圖、柱形圖、線形圖、區域圖、氣泡圖、樹形圖、雷達圖、徑向條形圖等。 使用此庫的首選方式是通過 npm，但可以使用 CDN，您所要做的就是指定一個div id="chart"容器來顯示圖表。

#13 – 重新圖表

如果您主要使用 React.js，則 Recharts 庫是在 D3.js 的基礎上使用 React 構建的。 它尊重原生 React.js 組件架構，使用 Recharts 創建的圖表可以解耦並作為您需要的頁面上的單獨組件重用。

所有圖表示例都預先編寫了組件結構，以防您想在現有項目中嘗試它們。 該庫於 2016 年首次發布，但仍在積極開發中。

圖表示例

請參閱 CodePen 上 binu (@binutomy) 的 Pen ReCharts。