數據就在我們身邊。我們用它來優化性能、提供服務和提高效率。然而，原始數字并不總是傳遞信息的最佳方式。如果您以視覺格式而不是文本格式呈現給他們，人們更有可能保留您提供給他們的任何數據。這使得圖表成為共享信息不可或缺的工具。
JavaScript 提供了許多免費庫，您可以使用它們在網站上創建圖表。在這篇文章中，我們將創建一個最佳免費 JavaScript 圖表庫的列表，并簡要概述其功能，以幫助您做出明智的選擇。
1. Chart.js
當考慮在網站上繪制圖表時，首先想到的庫之一是 Chart.js。使用該庫的兩個最大優點是它非常容易學習并集成到您的網站中，并且它允許您創建八種常見類型的圖表：折線圖、條形圖、雷達圖、氣泡圖、散點圖、面積圖、餅圖和極坐標圖圖表。您還可以在同一個圖表上顯示兩種以上類型的圖表。
立即學習“Java免費學習筆記（深入）”；
由 Roseclad 制作的動畫演示。
該庫使用 HTML5 canvas 元素來渲染所有圖表，并且這些圖表默認是響應式的。這意味著它們將適應屏幕尺寸的變化。圖表的不同方面也可以使用庫提供的開箱即用方法進行動畫處理。
2. Chartist.js
Chartist.js 庫是另一個易于使用的解決方案，適合那些想要借助 JavaScript 創建自己的圖表的人。 Chart.js 和 Chartist.js 之間有一些相似之處，也有一些根本區別。
Ian Whitfield 的 Chartist 演示。
這個庫是輕量級且響應靈敏的，就像 Chart.js 一樣。它也很容易學習，并支持所有基本圖表類型，如折線圖、條形圖、餅圖等。該庫沒有任何您必須加載才能使圖表工作的外部依賴項。
Chart.js 和 Chartist.js 之間的一個很大區別是后者使用 SVG 呈現其圖表。所有圖表都分為許多子類型。例如，您可以創建簡單的折線圖以及帶有填充底層區域的折線圖或雙極折線圖。
Chartist.js 嚴格專注于提供渲染圖表的功能。這意味著您不會獲得用于事件處理、顯示標簽等的內置功能。但是，您自己添加它們相對容易。
3. D3.js
D3.js 庫是數據驅動文檔的縮寫，是數據可視化領域的重量級庫之一。您可以使用該庫以您喜歡的任何方式直觀地表示數據。這也包括標準圖表類型。
Jahid Hssan 的 D3 演示。
該庫的最大優勢是您在創建任何圖表時獲得的強大功能和靈活性。該庫允許您創建幾乎任何您能想象到的東西來表示您的數據。您不限于常見的圖表類型。該庫混合使用 SVG、Canvas 和 HTML 等技術來創建任何視覺元素。
渲染方面如此大的靈活性意味著使用該庫提供的所有功能將有一個陡峭的學習曲線。有大約 30 個模塊和 1,000 多種方法可以幫助您完成工作。
4. C3.js
有些人可能會對使用 D3.js 在其網站上創建圖表感到興奮，但他們可能會因陡峭的學習曲線而泄氣。如果我告訴你這個問題有解決方案怎么辦？
C3.js 庫提供了一個中間立場，您創建的圖表仍然在底層使用 D3.js，但您不必花費太多時間編寫代碼來執行此操作或學習每一個細節D3.js 庫的。對于主要對基于 D3.js 創建圖表感興趣的人來說，這是一個很好的解決方案。
Beat Temperli 的 C3 演示。
使該庫變得有用的三個功能是它的易用性、自定義選項以及您對呈現的圖表的控制。該庫基本上是 D3.js 的包裝器，因此它完成了創建圖表所需的所有繁重工作。
該庫還為其呈現的每個元素提供自定義類，使您可以更輕松地提供自己的樣式。最后，您可以使用相當多的回調來控制圖表的行為，即使在渲染圖表之后也是如此。
5. 冰沙圖表
Frappe Charts 是一個令人驚嘆的開源庫，可幫助您輕松創建時尚且響應靈敏的圖表。您無需加載任何額外的依賴項即可呈現圖表。
Kamal Dev 的演示。
該庫附帶了許多內置圖表類型，例如條形圖、折線圖、面積圖、餅圖和圓環圖。您還可以創建一些基于百分比的圖表，顯示不同項目的份額，類似于餅圖，但在條形圖上而不是圓形上。您還可以創建熱圖圖表，類似于 GitHub 顯示的存儲庫貢獻圖表。
您會喜歡這個庫的事情之一是它提供的定制范圍。庫附帶的工具提示非常棒。您還可以通過標記不同的線條和區域來注釋圖表。有很多可用的配置選項，您甚至可以在渲染數據點后對其進行修改。
6. Plotly.js
Plotly.js 也是一個免費的開源 JavaScript 庫，具有擴展的功能列表。該庫還包含 Python 和 R 模塊，以防您想用這些語言繪制一些圖表。
來自plotly的演示。
Plotly 構建于 D3.js 和 stackgl 之上。然而，與 D3 不同的是，Plotly 的開發人員特別專注于使其更容易使用并相當快速地繪制常見圖表類型。這對于正在尋找多種不同圖表類型的人來說是理想的選擇。 Plotly 可以幫助您創建 40 種不同類型的圖表，涵蓋從基本折線圖、條形圖和散點圖到直方圖和二維密度圖等統計圖表的所有內容。
該庫具有內置事件處理功能，可以處理單擊、懸停和選擇事件等。它還提供了許多其他配置選項和有用的功能，例如放大和縮小、平移、重置等。Plotly.js 允許您使圖表可編輯或使用您自己的區域設置在標簽中顯示文本。
7. ApexCharts
ApexCharts 將自己描述為一個現代 JavaScript 圖表庫，可使用簡單的 API 構建交互式圖表。使用該庫創建圖表實際上是一個簡單的過程。您只需傳遞所有必需的數據，例如圖表類型、標簽和要繪制為具有鍵值對的對象的數據集，該庫將負責渲染所有內容。
Reuben Prol 的演示。
該庫的其他一些顯著功能包括創建不同圖表然后同步它們的能力。您對一張圖表所做的更改將反映在另一張圖表中。有許多選項可供您與圖表交互。您可以放大和縮小、平移或上下滾動數據。
可用的圖表類型包括折線圖、條形圖、餅圖、圓環圖、雷達圖和燭臺圖等。您還可以將不同的圖表類型混合在一起，例如顯示相互重疊的條形圖、折線圖和面積圖。還可以添加您自己的注釋并動態更新圖表數據。
8. uPlot
uPlot JavaScript 圖表庫聲稱對于那些想要顯示大量數據點而不會對性能產生任何不利影響的人來說是一個小而快速的解決方案。他們還在 GitHub 頁面上提供了與一些流行圖表庫的速度比較。
一個令人驚嘆的性能指標是該庫可以在 135 毫秒內繪制大約 150,000 個數據點。其他功能包括非常快速且響應靈敏的縮放和懸停功能。以下 CodePen 演示創建了一個包含 100,000 個數據點的圖表。
Stephen Wicklund 的演示。
該庫的一些有用功能包括多個 y 軸、刻度和網格，以及不同類型的刻度（例如線性和對數）。您可以使用該庫創建折線圖、條形圖和面積圖等類型。您還可以使用描邊、填充和破折號等屬性自定義圖表的外觀。
不過，有一些事情可能會阻止您使用該庫。巨大的性能提升是有代價的。該庫不提供任何內置的過渡和動畫。也沒有內置行為來處理滾動和縮放行為。但是，存在插件可以為您提供該功能。
最終想法
我們介紹了八個流行且免費的 JavaScript 圖表庫，它們試圖滿足不同類型的需求。它們每個都有自己的優點和缺點，因此您可以選擇適合您并滿足您所有要求的那個。例如，如果您想要簡單易用的東西，或者使用 Apex Charts 創建更高級的圖表，Chart.js 就非常有用。
查看庫在其頁面上發布的其他一些演示，看看其中哪些能夠提供您喜歡的功能。
