時(shí)間軸圖表是按時(shí)間順序表示重要事件和時(shí)期的絕佳方式。現(xiàn)在，讓我教你如何使用JavaScript輕松創(chuàng)建一個(gè)優(yōu)雅的交互式可視化！

　　為了使本教程既有用又有趣，我決定采用真實(shí)的數(shù)據(jù)。和我一起，在JS時(shí)間表圖表中逐步可視化埃隆·馬斯克(Elon Musk)的生活，重點(diǎn)關(guān)注他作為企業(yè)家和投資者職業(yè)生涯中最重要的事件。

　　時(shí)間軸圖表預(yù)覽

　　看看我將在本教程中創(chuàng)建的漂亮的JavaScript時(shí)間軸圖表，并繼續(xù)閱讀以了解如何操作！

　　構(gòu)建基本 JS 時(shí)間軸圖表的 4 個(gè)步驟

　　創(chuàng)建一個(gè)交互式的基于JavaScript的時(shí)間軸圖表，即使是一個(gè)基本的時(shí)間軸圖表，似乎也是一項(xiàng)艱巨的任務(wù)。但現(xiàn)在，您將看到如何輕松完成此操作。

　　在本教程中，構(gòu)建 JS 時(shí)間軸圖表的過(guò)程分為四個(gè)步驟：創(chuàng)建網(wǎng)頁(yè)、添加腳本、設(shè)置數(shù)據(jù)和配置可視化。

　　一個(gè)令人驚嘆的基本時(shí)間軸圖表將安排在幾行易于理解的代碼中。然后，我將向您展示如何對(duì)其進(jìn)行自定義(也沒(méi)有太多復(fù)雜性)。跟我來(lái)!

　　1. 創(chuàng)建網(wǎng)頁(yè)

　　首先，我用HTML塊元素制作了一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)。這就是我基于JavaScript的時(shí)間軸圖表將出現(xiàn)的地方。

　　我為此元素提供一個(gè) ID，并將其高度和重量設(shè)置為 100%，以便可視化效果占據(jù)整個(gè)頁(yè)面。

　　2. 添加腳本

　　其次，我將要用于構(gòu)建時(shí)間軸圖表的所有腳本添加到HTML頁(yè)面的部分。

　　在本教程中，我將使用 AnyChart JS 圖表，這是一個(gè)強(qiáng)大的 JavaScript 圖表庫(kù)，具有廣泛的開(kāi)箱即用功能，可以輕松快速地可視化數(shù)十種圖表類(lèi)型中的數(shù)據(jù)，包括時(shí)間軸。

　　在這里，我需要核心和時(shí)間軸模塊。

　　3. 設(shè)置數(shù)據(jù)

　　第三，我設(shè)置了要在JS時(shí)間軸圖表中可視化的數(shù)據(jù)。

　　將有兩個(gè)系列的不同類(lèi)型，范圍和時(shí)刻。每個(gè)都將通過(guò)單獨(dú)的函數(shù)添加。

　　范圍系列適用于周期。每個(gè)數(shù)據(jù)點(diǎn)都有一個(gè)名稱(chēng)以及開(kāi)始日期和結(jié)束日期。

　　時(shí)刻系列適用于單個(gè)事件。每個(gè)數(shù)據(jù)點(diǎn)都有一個(gè)日期和文本。

　　好!我們已經(jīng)準(zhǔn)備好了一個(gè)頁(yè)面、腳本和數(shù)據(jù)。現(xiàn)在，是時(shí)候添加一些 JavaScript 圖表代碼來(lái)完成預(yù)期的交互式時(shí)間軸圖表可視化了!

　　4. 配置可視化

　　首先，我們添加上一步中的數(shù)據(jù)。然后，我們使用一個(gè)函數(shù)來(lái)確保在已經(jīng)加載網(wǎng)頁(yè)時(shí)執(zhí)行配置時(shí)間軸圖表的后續(xù)代碼。

　　然后，在函數(shù)中，我使用該函數(shù)創(chuàng)建一個(gè)時(shí)間軸圖表實(shí)例，設(shè)置兩個(gè)序列，并使范圍序列標(biāo)簽顯示屬性。

　　同樣在那里，我又添加了幾行來(lái)授權(quán)時(shí)間軸圖表，為其定義一個(gè)容器，最后，命令繪制生成的圖形。

　　結(jié)果：基本 JS 時(shí)間軸圖表

　　一個(gè)很酷的交互式 JavaScript 時(shí)間軸圖表可視化已經(jīng)準(zhǔn)備就緒。建造一個(gè)遠(yuǎn)非困難，不是嗎？

　　以下是此時(shí)間線圖表的完整代碼。它也可以在任何圖表游樂(lè)場(chǎng)上找到。

　　創(chuàng)建自定義 JS 時(shí)間軸圖表

　　時(shí)間線看起來(lái)引人入勝。但總有改進(jìn)的余地!我將向您展示如何很好地自定義此類(lèi)JavaScript時(shí)間軸圖表的某些部分，同樣沒(méi)有太多麻煩。

　　1. 時(shí)間軸圖表顏色

　　個(gè)性化圖表時(shí)，一個(gè)簡(jiǎn)單而有效的更改是修改顏色。

　　首先，我將屬性和范圍系列數(shù)據(jù)添加，時(shí)間軸圖表將自動(dòng)應(yīng)用相應(yīng)的值：

　　其次，我按以下方式更改時(shí)刻系列標(biāo)記的顏色：

　　2. 范圍系列標(biāo)簽和高度

　　接下來(lái)，我想提供范圍系列標(biāo)簽的內(nèi)容以及相應(yīng)周期的開(kāi)始和結(jié)束年份。使用 HTML 設(shè)置標(biāo)簽格式也很容易。來(lái)看看吧。

　　讓我也增加范圍系列的高度，以便新添加的信息可以整齊地適應(yīng)。這只需一行代碼即可完成。

　　3. 時(shí)間軸圖表標(biāo)題

　　為了提供有關(guān)時(shí)間線顯示內(nèi)容的更多信息，我使用 HTML 自定義圖表標(biāo)題。

　　現(xiàn)在，基于JS的時(shí)間軸圖表有一個(gè)副標(biāo)題，整個(gè)標(biāo)題部分都得到了美化。

　　4. 時(shí)間軸圖表工具提示

　　之后，我想對(duì)時(shí)間軸圖表工具提示進(jìn)行一些調(diào)整，用于范圍和時(shí)刻序列。

　　對(duì)于每個(gè)系列，我為工具提示文本創(chuàng)建基于 HTML 的格式模式，啟用 HTML，并應(yīng)用配置的格式。為了獲得清晰、完整的外觀，我刪除了工具提示標(biāo)題和分隔符。

　　5. 時(shí)間軸滾動(dòng)條

　　當(dāng)您可以輕松地仔細(xì)查看某個(gè)時(shí)期時(shí)，瀏覽時(shí)間軸圖表會(huì)更容易。在這里，您可以使用鼠標(biāo)滾輪進(jìn)行放大和縮小。但也可以在時(shí)間線下方添加一個(gè)滾動(dòng)條，這只需要一條快速行。

　　6. 上下文菜單和導(dǎo)出

　　最后，讓我再添加一個(gè)很酷的東西，一個(gè)上下文菜單，其中包含用于保存和共享時(shí)間軸圖表的選項(xiàng)。

　　我只引用這些JS和CSS文件以及網(wǎng)頁(yè)部分中已經(jīng)存在的其他文件，圖表庫(kù)的默認(rèn)設(shè)置將負(fù)責(zé)其余的工作。

　　結(jié)果：自定義 JS 時(shí)間軸圖表

　　一個(gè)優(yōu)雅的交互式JavaScript時(shí)間軸圖表已經(jīng)準(zhǔn)備就緒！

　　請(qǐng)查看下面的支持此時(shí)間線圖表的代碼。它也可以在 AnyChart 游樂(lè)場(chǎng)上使用，您可以通過(guò)進(jìn)一步調(diào)整可視化、添加數(shù)據(jù)等方式繼續(xù)掌握 JS 時(shí)間線。