当你想按时间顺序显示一些事件的信息时，时间轴就很方便了。它们使我们能够以一种视觉上令人愉悦的方式向我们的用户展示信息。然而，如果你从头开始写代码以在你的网站上显示可用的时间线，可能会有点耗费时间。
如果你想在你的网站上显示一些时间线，一个体面的JavaScript时间线库将为你节省大量的时间和精力。我们创建了一个列表，列出了一些最好的免费和开源的JavaScript时间线库，以节省你的麻烦，让你自己去了解它们。希望这些库中有一个会有你需要的东西。
1.TimelineJS3
我们将以一个相对知名的时间线库开始我们的列表，它叫TimelineJS3。它已经被很多流行的网站使用，如Time、Mashable、Engadget和CNN等等。
使用这个库创建时间线的最简单的选择是简单地使用官方的创作工具。它有一个分步骤的指南来帮助你完成。然后，你将能够通过添加一行代码将时间线嵌入到你自己的网站。
还有一个选项是在你自己的网站上实例化时间线，而不是嵌入它们。你只需要包括相关的CSS和JavaScript文件，以及一点点代码。这使你有能力轻松地定制时间线中的很多东西。确保你在改变时间线的风格时，使用库的Less文件来编译你的样式表。这将节省你写覆盖选择器的许多时间。
还有用于CMS如WordPress和Drupal的插件，使在这些平台上嵌入时间线的过程更容易。
2.TimelineJS
我们名单上的第二个库被称为TimelineJS。它的名字听起来可能与TimelineJS3相似，但它们是完全不同的项目。你将不得不在这个库上花费相对较少的时间来学习如何让你的时间线启动和运行。
请记住，它是一个jQuery插件，所以你需要在你的网页上加载jQuery，如果你还没有使用它的话。时间线的内容在这里使用HTML而不是JSON来指定。每个时间点的内容都被包裹在它自己的div 元素中，该元素也有一个data-time 属性来指示事件发生的时间。
该插件有多种选项来控制时间线的行为。这包括改变时间线的方向和它的自动播放速度，如果它被设置为自动播放。你还可以定义自定义类，这些类应该被添加到不同的时间线元素。
所有这些选项将使你更容易添加自己的自定义样式。官方网站上有一堆例子，向你展示不同选项设置后的样子。
- React Calendar Timeline
React Calendar Timeline组件与前两个库不同。这个组件并不是要作为一个工具来给观众提供一个事件的概览，用时间轴来标记事件发生的时间。
你可以认为它更像是一个事件规划器或跟踪器。例如，在你管理一群人的情况下，它将是有用的，这些人被分配了任务，必须在特定的时间点完成。
该组件有一个巨大的功能集，帮助你管理和计划不同种类的活动。它具有所有的基本功能，如在时间线上平移和缩放。添加到时间线上的项目可以是可移动或可调整大小的。你还可以选择为项目提供你自己的自定义样式。多个时间线也可以连接在一起，这样滚动其中一个就可以同步移动其他时间线。
你还可以监听不同的事件，以便在组件默认提供的功能之外添加你自己的功能。
4.Vis Timeline
Vis Timeline库对那些寻找数据可视化库的人很有帮助，它可以创建完全可定制的交互式时间线和2D图。
该库有一套庞大的功能。你可以把事件或数据分成几组，以防止项目混合。然而，你也可以选择允许这种混杂。你还可以在时间轴上移动，或放大和缩小以适应屏幕上的项目。时间尺度会自动调整，范围可以从几毫秒到几年。
单个项目既可以只有一个开始日期，也可以有一个开始和结束日期的组合。有许多方法可以使你创建的任何时间线具有风格。你可以改变网格背景，或为不同的事件项目添加独特的类，以使它们有自己的风格。
该库还允许你用柱状图或线状图在2D图上绘制事件，而不是线性时间线。
- Labella.js
很有可能你在创建一条时间线时，由于它们发生的时间很短，所以你必须把很多标签放在很近的地方。你可以在时间轴上用一个简单的点来标记时间，但包含事件更多信息的标签会占用额外的空间。这意味着，不同的标签之间有相当大的重叠机会。库Labella.js为你解决了这个标签包装问题。
关于Labella.js需要记住的一点是，它假设你已经实现或整合了你自己的时间线。然而，如果你想使用具有Labella所有功能的东西，同时也想实现时间线功能，你也可以使用另一个免费的库，叫做d3kit-timeline。你只需写十几行代码就能创建你自己的标记的时间线。
玩一玩交互式演示，看看你如何创建自己的包装好的时间线标签。
6.时间线
Squarechip时间线库对于那些正在寻找轻量级和无依赖性的时间线实现的人来说是一个很好的选择。该库在渲染时间线时将性能作为重点。
你可以用它来创建水平和垂直的时间线。它们是响应式的，你可以配置一堆选项来设置它们，在宽度较小的屏幕上将水平的时间线改为垂直的。
尽管该库是无依赖性的，但如果网页上加载了jQuery，它就会将自己注册为一个插件。你可以通过三种不同的方式来创建和初始化时间线：使用普通的vanilla JavaScript，使用jQuery或通过在你想显示时间线的元素上提供数据属性。
该库本身带有最小的样式，所以你可以很容易地应用你自己的样式而不需要太多努力。你可以在官方网站上找到该时间线的文档以及一些工作实例。
- 时间线讲故事者
对于想要创建不局限于简单的水平或垂直布局的时间线的人来说，时间线Storyteller库是功能最丰富的解决方案。它是由微软开发的，具有巨大的功能集。
你可以用多种格式传递你的时间线数据，如CSV、JSON和谷歌电子表格。你可以使用各种属性将相关信息分配给不同的事件，但实际上只有
start_date ，而其他是可选的。
时间轴上的数据可以用线性、径向、螺旋或网格格式等布局表示。你还可以为事件的放置指定一个时间尺度。有一个带有绝对值的时间尺度，以及相对和对数尺度。可以考虑访问库的画廊，看看你可以用它创建的所有可能的布局。
- D3时间线
D3.js库在可视化各种数据方面非常出色，时间线也不例外。你可以使用D3时间线库，它基本上是D3的一个扩展，以便快速创建简单的时间线。
该库使用起来相当简单，但为在时间线上放置事件标签提供了大量的选项。你可以轻松地创建有或没有轴的时间线。还有一个选项是将圆形标签和矩形标签混合在一起，以便绘制发生在某个时间点和某个时间段的事件。事件标签可以堆叠，并对点击事件作出反应。
你可以为事件标签添加自定义颜色，或者在空间不足的情况下旋转轴标签。在资源库的主页上提到了很多方法来定制时间线的外观和行为。
最后的思考
时间线有很多实际的应用，如按时间顺序向用户展示数据，或在计划任何事件时与团队成员协调等。当你在自己的网站上创建时间线时，使用免费和开源的JavaScript时间线库可以为你节省大量的时间。
在这篇文章中，我们列出了一些最受欢迎的免费JavaScript时间线库，你可以轻松地将其整合到你的网站中。它们将允许你用TimelineJS3创建丰富的多媒体时间线，或者用Squarechip时间线库创建简单的、响应式的东西。
