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

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

　　時間軸圖表預(yù)覽

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

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

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

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

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

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

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

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

　　2. 添加腳本

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

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

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

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

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

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

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

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

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

　　4. 配置可視化

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

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

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

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

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

　　以下是此時間線圖表的完整代碼。它也可以在任何圖表游樂場上找到。

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

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

　　1. 時間軸圖表顏色

　　個性化圖表時，一個簡單而有效的更改是修改顏色。

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

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

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

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

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

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

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

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

　　4. 時間軸圖表工具提示

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

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

　　5. 時間軸滾動條

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

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

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

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

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

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

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