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

JavaScript 提供了許多免費(fèi)函式庫，您可以使用它們?cè)诰W(wǎng)站上建立圖表。在這篇文章中，我們將創(chuàng)建一個(gè)最佳免費(fèi) JavaScript 圖表庫的列表，並簡要概述其功能，以幫助您做出明智的選擇。

1. Chart.js

##當(dāng)考慮在網(wǎng)站上繪製圖表時(shí)，首先想到的庫之一是 Chart.js。使用該庫的兩個(gè)最大優(yōu)點(diǎn)是它非常容易學(xué)習(xí)並整合到您的網(wǎng)站中，並且它允許您創(chuàng)建八種常見類型的圖表：折線圖、條形圖、雷達(dá)圖、氣泡圖、散點(diǎn)圖、面積圖、圓餅圖和極座標(biāo)圖圖表。您也可以在同一個(gè)圖表上顯示兩種以上類型的圖表。

由 Roseclad 製作的動(dòng)畫示範(fàn)。

該庫使用 HTML5 canvas 元素來渲染所有圖表，並且這些圖表預(yù)設(shè)是響應(yīng)式的。這意味著它們將適應(yīng)螢?zāi)怀叽绲淖兓?。圖表的不同方面也可以使用庫提供的開箱即用方法進(jìn)行動(dòng)畫處理。

2. Chartist.js

Chartist.js 函式庫是另一個(gè)易於使用的解決方案，適合想要使用 JavaScript 建立自己的圖表的人。 Chart.js 和 Chartist.js 之間有一些相似之處，也有一些根本區(qū)別。

Ian Whitfield 的 Chartist 示範(fàn)。

這個(gè)函式庫是輕量級(jí)且反應(yīng)靈敏的，就像 Chart.js 一樣。它也很容易學(xué)習(xí)，並支援所有基本圖表類型，如折線圖、長條圖、餅圖等。該庫沒有任何您必須加載才能使圖表工作的外部依賴項(xiàng)。

Chart.js 和 Chartist.js 之間的一個(gè)很大差異是後者使用 SVG 呈現(xiàn)其圖表。所有圖表都分為許多子類型。例如，您可以建立簡單的折線圖以及填滿底層區(qū)域的折線圖或雙極折線圖。

Chartist.js 嚴(yán)格專注於提供渲染圖表的功能。這意味著您不會(huì)獲得用於事件處理、顯示標(biāo)籤等的內(nèi)建功能。但是，您自己添加它們相對(duì)容易。

3.

D3.js

#D3.js 函式庫是資料驅(qū)動(dòng)文件的縮寫，是資料視覺化領(lǐng)域的重量級(jí)函式庫之一。您可以使用該庫以您喜歡的任何方式直觀地表示資料。這也包括標(biāo)準(zhǔn)圖表類型。

Jahid Hssan 的 D3 示範(fàn)。

該庫的最大優(yōu)勢(shì)是您在創(chuàng)建任何圖表時(shí)獲得的強(qiáng)大功能和靈活性。該庫允許您創(chuàng)建幾乎任何您能想像到的東西來表示您的數(shù)據(jù)。您不限於常見的圖表類型。該程式庫混合使用 SVG、Canvas 和 HTML 等技術(shù)來創(chuàng)建任何視覺元素。

渲染方面如此大的靈活性意味著使用該庫提供的所有功能將具有陡峭的學(xué)習(xí)曲線。有大約 30 個(gè)模組和 1,000 多種方法可以幫助您完成工作。

4.

C3.js

#有些人可能會(huì)對(duì)使用 D3.js 在其網(wǎng)站上建立圖表感到興奮，但他們可能會(huì)因陡峭的學(xué)習(xí)曲線而洩?dú)狻Ｈ绻腋嬖V你這個(gè)問題有解決方案怎麼辦？

C3.js 庫提供了一個(gè)中間立場，您創(chuàng)建的圖表仍然在底層使用 D3.js，但您不必花太多時(shí)間編寫程式碼來執(zhí)行此操作或?qū)W習(xí)每一個(gè)細(xì)節(jié)D3.js 庫的。對(duì)於主要對(duì)基於 D3.js 創(chuàng)建圖表感興趣的人來說，這是一個(gè)很好的解決方案。

Beat Temperli 的 C3 演示。

使該庫變得有用的三個(gè)功能是它的易用性、自訂選項(xiàng)以及您對(duì)呈現(xiàn)的圖表的控制。該庫基本上是 D3.js 的包裝器，因此它完成了創(chuàng)建圖表所需的所有繁重工作。 ###

該庫還為其呈現(xiàn)的每個(gè)元素提供自訂類，使您可以更輕鬆地提供自己的樣式。最後，您可以使用相當(dāng)多的回調(diào)來控制圖表的行為，即使在渲染圖表之後也是如此。

5. 冰沙圖表

Frappe Charts 是一個(gè)令人驚嘆的開源庫，可幫助您輕鬆創(chuàng)建時(shí)尚且響應(yīng)靈敏的圖表。您無需加載任何額外的依賴項(xiàng)即可呈現(xiàn)圖表。

Kamal Dev 的示範(fàn)。

此庫附帶了許多內(nèi)建圖表類型，例如長條圖、折線圖、面積圖、圓餅圖和圓環(huán)圖。您也可以建立一些基於百分比的圖表，顯示不同項(xiàng)目的份額，類似於圓餅圖，但在長條圖上而不是圓形上。您也可以建立熱圖圖表，類似於 GitHub 顯示的儲(chǔ)存庫貢獻(xiàn)圖表。

您會(huì)喜歡這個(gè)庫的事情之一是它提供的自訂範(fàn)圍。庫附帶的工具提示非常棒。您也可以透過標(biāo)記不同的線條和區(qū)域來註釋圖表。有許多可用的配置選項(xiàng)，您甚至可以在渲染資料點(diǎn)後對(duì)其進(jìn)行修改。

6. Plotly.js

#Plotly.js 也是一個(gè)免費(fèi)的開源 JavaScript 函式庫，具有擴(kuò)充的功能清單。該程式庫還包含 Python 和 R 模組，以防您想用這些語言繪製一些圖表。

來自plotly的演示。

Plotly 建構(gòu)於 D3.js 和 stackgl 之上。然而，與 D3 不同的是，Plotly 的開發(fā)人員特別專注於使其更容易使用並相當(dāng)快速地繪製常見圖表類型。這對(duì)於正在尋找多種不同圖表類型的人來說是理想的選擇。 Plotly 可以幫助您建立 40 種不同類型的圖表，涵蓋從基本折線圖、長條圖和散點(diǎn)圖到直方圖和二維密度圖等統(tǒng)計(jì)圖表的所有內(nèi)容。

該庫具有內(nèi)建事件處理功能，可處理單擊、懸停和選擇事件等。它還提供了許多其他配置選項(xiàng)和有用的功能，例如放大和縮小、平移、重置等。 Plotly.js 讓您可以讓圖表可編輯或使用您自己的區(qū)域設(shè)定在標(biāo)籤中顯示文字。

7.

ApexCharts

##ApexCharts 將自己描述為一個(gè)現(xiàn)代 JavaScript 圖表庫，可使用簡單的 API 建立互動(dòng)式圖表。使用該庫創(chuàng)建圖表實(shí)際上是一個(gè)簡單的過程。您只需傳遞所有必需的數(shù)據(jù)，例如圖表類型、標(biāo)籤和要繪製為具有鍵值對(duì)的物件的資料集，該庫將負(fù)責(zé)渲染所有內(nèi)容。

Reuben Prol 的示範(fàn)。

該庫的其他一些顯著功能包括建立不同圖表然後同步它們的能力。您對(duì)一張圖表所做的更改將反映在另一張圖表中。有許多選項(xiàng)可供您與圖表互動(dòng)。您可以放大和縮小、平移或上下滾動(dòng)資料。

可用的圖表類型包括折線圖、長條圖、圓餅圖、圓環(huán)圖、雷達(dá)圖和燭臺(tái)圖等。您也可以將不同的圖表類型混合在一起，例如顯示相互重疊的長條圖、折線圖和麵積圖。也可以新增您自己的註釋並動(dòng)態(tài)更新圖表資料。

8.

uPlot

uPlot JavaScript 圖表庫聲稱對(duì)於想要顯示大量資料點(diǎn)而不會(huì)對(duì)效能產(chǎn)生任何不利影響的人來說是一個(gè)小而快速的解決方案。他們還在 GitHub 頁面上提供了與一些流行圖表庫的速度比較。

一個(gè)令人驚嘆的效能指標(biāo)是該函式庫可以在 135 毫秒內(nèi)繪製大約 150,000 個(gè)資料點(diǎn)。其他功能包括非?？焖偾翼憫?yīng)靈敏的縮放和懸停功能。以下 CodePen 示範(fàn)建立了一個(gè)包含 100,000 個(gè)資料點(diǎn)的圖表。

Stephen Wicklund 的示範(fàn)。

此函式庫的一些有用功能包括多個(gè) y 軸、刻度和網(wǎng)格，以及不同類型的刻度（例如線性和對(duì)數(shù)）。您可以使用該庫建立折線圖、長條圖和麵積圖等類型。您也可以使用描邊、填滿和破折號(hào)等屬性自訂圖表的外觀。 ###

不過，有一些事情可能會(huì)阻止您使用該庫。巨大的性能提升是有代價(jià)的。該庫不提供任何內(nèi)建的過渡和動(dòng)畫。也沒有內(nèi)建行為來處理滾動(dòng)和縮放行為。但是，存在插件可以為您提供該功能。

最終想法

我們介紹了八個(gè)流行且免費(fèi)的 JavaScript 圖表庫，它們?cè)噲D滿足不同類型的需求。它們每個(gè)都有自己的優(yōu)點(diǎn)和缺點(diǎn)，因此您可以選擇適合您並滿足您所有要求的。例如，如果您想要簡單易用的東西，或使用 Apex Charts 建立更進(jìn)階的圖表，Chart.js 就非常有用。

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

以上是頂級(jí)免費(fèi) JavaScript 圖表庫的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！