頂級免費 JavaScript 圖表庫

資料就在我們身邊。我們用它來優化效能、提供服務和提高效率。然而，原始數字並不總是傳遞訊息的最佳方式。如果您以視覺格式而不是文字格式呈現給他們，人們更有可能保留您提供給他們的任何資料。這使得圖表成為共享資訊不可或缺的工具。

JavaScript 提供了許多免費函式庫，您可以使用它們在網站上建立圖表。在這篇文章中，我們將創建一個最佳免費 JavaScript 圖表庫的列表，並簡要概述其功能，以幫助您做出明智的選擇。

1. Chart.js

##當考慮在網站上繪製圖表時，首先想到的庫之一是 Chart.js。使用該庫的兩個最大優點是它非常容易學習並整合到您的網站中，並且它允許您創建八種常見類型的圖表：折線圖、條形圖、雷達圖、氣泡圖、散點圖、面積圖、圓餅圖和極座標圖圖表。您也可以在同一個圖表上顯示兩種以上類型的圖表。

由 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 就非常有用。

查看庫在其頁面上發布的其他一些演示，看看其中哪些能夠提供您喜歡的功能。

以上是頂級免費 JavaScript 圖表庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！