有關(guān)如何使用 JavaScript 快速創(chuàng)建漂亮的交互式折線圖(和分步線圖)的分步指南。
數(shù)據(jù)可視化是一個(gè)廣闊的領(lǐng)域，有許多不同類型的圖表可供學(xué)習(xí)和創(chuàng)建。但是有幾個(gè)基本的常青圖，每個(gè)處理分析的數(shù)據(jù)設(shè)計(jì)師和Web開發(fā)人員都應(yīng)該知道如何構(gòu)建。其中之一是折線圖(或折線圖)。它主要設(shè)計(jì)用于表示隨時(shí)間變化的數(shù)據(jù)。
您可以按照本教程學(xué)習(xí)如何使用 JavaScript 快速創(chuàng)建漂亮的交互式折線圖(和步長(zhǎng)線圖)。我們將看看一些很酷的例子，并逐步構(gòu)建它們，這將使這個(gè)過程既清晰又有趣。
為了您的方便，您可以在CodePen [和 AnyChart 游樂場(chǎng)] 上找到所有這些代碼，以便您可以不受限制地進(jìn)一步使用折線圖代碼。
我們的數(shù)據(jù)集
在過去的二十年里，網(wǎng)球界非常壯觀。三巨頭 - 羅杰·費(fèi)德勒，拉斐爾·納達(dá)爾和諾瓦克·德約科維奇 - 已經(jīng)贏得了驚人的63場(chǎng)(過去78場(chǎng))大滿貫賽事。這些是最負(fù)盛名的錦標(biāo)賽。
我決定策劃他們杰出的競(jìng)爭(zhēng)。因此，本教程中的JS折線圖將可視化三巨頭的大滿貫冠軍賽。第一次發(fā)球已經(jīng)來了！
如何通過 4 個(gè)步驟構(gòu)建折線圖
一般來說，在JavaScript中創(chuàng)建任何圖表的整個(gè)過程分為四個(gè)步驟，折線圖也不例外：
使用容器創(chuàng)建一個(gè) HTML 頁(yè)面。
包括腳本文件。
添加您的數(shù)據(jù)。
對(duì)可視化進(jìn)行編碼。
現(xiàn)在，讓我們逐一執(zhí)行這些步驟。
1. 使用容器創(chuàng)建 HTML 頁(yè)面
首先，您需要一個(gè)希望圖表顯示的位置。
如果還沒有，請(qǐng)創(chuàng)建一個(gè)基本網(wǎng)頁(yè)。然后為折線圖創(chuàng)建一個(gè)容器 — 添加一個(gè) HTML 塊級(jí)元素，并為其提供唯一 ID 以供進(jìn)一步參考。
以下是此類頁(yè)面的外觀：
元素的 和 參數(shù)設(shè)置為 100%。因此，折線圖將在整個(gè)網(wǎng)頁(yè)上呈現(xiàn)。當(dāng)然，您可以根據(jù)自己的喜好和需求設(shè)置樣式設(shè)置。widthheight
2. 包含腳本文件
接下來，在 本節(jié)中包含所有 JavaScript 文件，我們將使用這些文件來創(chuàng)建折線圖。
有很多不同的JavaScript圖表庫(kù)，可以讓你以快速簡(jiǎn)單的方式可視化數(shù)據(jù)。其中許多都支持折線圖，您可以根據(jù)項(xiàng)目要求選擇一個(gè)或另一個(gè)。
為了便于說明，在本教程中，我將使用任何圖表 JS 圖表。它非常靈活，附帶了大量的圖表文檔和API參考，您可以免費(fèi)使用它(除非您正在為企業(yè)構(gòu)建內(nèi)容)。
對(duì)于折線圖，我從CDN添加“基本”模塊。(當(dāng)然，您可以下載它，將其放在您網(wǎng)站上的文件夾中，并在這種情況下使用您自己的鏈接。
折線圖的 JavaScript 代碼將插入到 部分 和 標(biāo)記之間(如果需要，您可以將這些代碼放在 部分中)。<script></script><body><head>
3. 添加您的數(shù)據(jù)
然后，在折線圖中添加要可視化的數(shù)據(jù)。
我按年計(jì)算了費(fèi)德勒、納達(dá)爾和德約科維奇贏得的所有大滿貫單打冠軍。我將像這樣將其添加為數(shù)組數(shù)組。
如果您在特定情況下更喜歡其他格式，例如 JSON、XML、CSV 或其他格式，請(qǐng)檢查處理數(shù)據(jù)的方法。
在每個(gè)數(shù)組中，year 是第一個(gè)參數(shù)(列 #0)。然后是隨后三名球員贏得的冠軍頭銜數(shù)量(每個(gè)人的累積)。
4. 編寫可視化代碼
現(xiàn)在，熱身會(huì)議已經(jīng)結(jié)束，球場(chǎng)已經(jīng)全部準(zhǔn)備就緒。因此，讓我們開始匹配并執(zhí)行一些快速的 JavaScript 編碼!
首先，添加如下圖所示：anychart.onDocumentReady()
其他所有內(nèi)容都包含在該函數(shù)中。
因此，其次，包括數(shù)據(jù)(來自上一步)。
第三，創(chuàng)建一個(gè)數(shù)據(jù)集并映射每個(gè)系列(每個(gè)玩家一個(gè))：
第四，使用映射的數(shù)據(jù)創(chuàng)建一個(gè)折線圖實(shí)例和三個(gè)序列：
第五，為了一目了然地清楚折線圖中顯示的內(nèi)容，一個(gè)好主意是添加圖例和標(biāo)題：
最后，引用容器元素 ID 并繪制生成的折線圖：
就是這樣！使用JS構(gòu)建的全功能折線圖已經(jīng)準(zhǔn)備就緒。感覺就像是直落兩盤的勝利，不是嗎？
查看這個(gè)基本版本的折線圖，其中包含代碼筆[或任何圖表游樂場(chǎng)]上的完整HTML / CSS / JS代碼。為了以防萬(wàn)一，這也是代碼：
京公網(wǎng)安備 11010802030320號(hào)