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

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

　　時間軸圖表預覽

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

　　構建基本 JS 時間軸圖表的 4 個步驟

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

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

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

　　1. 創(chuàng)建網頁

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

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

　　2. 添加腳本

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

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

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

　　3. 設置數據

　　第三，我設置了要在JS時間軸圖表中可視化的數據。

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

　　范圍系列適用于周期。每個數據點都有一個名稱以及開始日期和結束日期。

　　時刻系列適用于單個事件。每個數據點都有一個日期和文本。

　　好!我們已經準備好了一個頁面、腳本和數據。現在，是時候添加一些 JavaScript 圖表代碼來完成預期的交互式時間軸圖表可視化了!

　　4. 配置可視化

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

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

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

　　結果：基本 JS 時間軸圖表

　　一個很酷的交互式 JavaScript 時間軸圖表可視化已經準備就緒。建造一個遠非困難，不是嗎？

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

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

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

　　1. 時間軸圖表顏色

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

　　首先，我將屬性和范圍系列數據添加，時間軸圖表將自動應用相應的值：

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

　　2. 范圍系列標簽和高度

　　接下來，我想提供范圍系列標簽的內容以及相應周期的開始和結束年份。使用 HTML 設置標簽格式也很容易。來看看吧。

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

　　3. 時間軸圖表標題

　　為了提供有關時間線顯示內容的更多信息，我使用 HTML 自定義圖表標題。

　　現在，基于JS的時間軸圖表有一個副標題，整個標題部分都得到了美化。

　　4. 時間軸圖表工具提示

　　之后，我想對時間軸圖表工具提示進行一些調整，用于范圍和時刻序列。

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

　　5. 時間軸滾動條

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

　　6. 上下文菜單和導出

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

　　我只引用這些JS和CSS文件以及網頁部分中已經存在的其他文件，圖表庫的默認設置將負責其余的工作。

　　結果：自定義 JS 時間軸圖表

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

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