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