8 个免费开源JavaScript时间线

当您想要按时间顺序显示有关事件的信息时，时间线会派上用场。它们使咱们能够以视觉上令人愉悦的方式向用户呈现信息。但是，如果您从头开始做所有事情，编写在您的网站上显示可用时间线所需的代码可能会有点耗时。

如果您想在网站上显示时间线，一个不错的 javascript 时间线库将为您节省大量时间和精力。咱们创建了一些最好的免费和开源 JavaScript 时间线库列表，让您免于自己浏览它们的麻烦。这些库之一有望满足您的需求。

1.时间线JS3

咱们将从一个名为TimelineJS3的相对知名的时间线库开始咱们的列表。它已被 Time、Mashable、Engadget 和 CNN 等许多流行网站使用。

使用这个库创建时间线的最简单的选择就是使用官方创作工具。它附带分步指南，可帮助您一路走好。然后，您将能够通过添加一行代码将时间线嵌入到您自己的网站中。

还有一个选项可以在您自己的网站上实例化时间线，而不是嵌入它们。您只需要包含相关的 css 和 javaScript 文件以及一些代码。这使您可以轻松地自定义时间轴中的许多内容。确保在更改时间线样式时使用库的 Less 文件来编译样式表。这将为您节省大量编写覆盖选择器的时间。

还有一些用于 CMS 的插件，例如 wordpress 和 drupal，可以使在这些平台上嵌入时间线的过程更容易。

2.时间线JS

咱们列表中的第二个库称为TimelineJS。它的名字可能听起来与 TimelineJS3 相似，但它们是完全不同的项目。您将不得不在此库上花费相对较少的时间来学习如何启动和运行您的时间线。

请记住，它是一个 jquery 插件，因此如果您还没有使用它，则需要在您的网页上加载 jQuery。时间线的内容在此处使用 html 而不是 JSON 指定。每个时间点的内容都包装在自己的div元素中，该元素还有一个data-time属性来指示事件发生的时间。

该插件带有多种选项来控制时间线的行为。这包括更改时间线的方向及其自动播放速度（如果设置为自动播放）。您还可以定义应添加到不同时间线元素的自定义类。

所有这些选项将使您更容易添加自己的自定义样式。官方网站上有很多示例可以向您展示设置不同选项后的外观。

3. react 日历时间表

React Calendar Timeline组件与前两个库不同。这并不意味着用作一种工具，为观众提供带有时间轴的事件概览，以标记事件发生的时间。

你可以把它想象成一个活动策划者或跟踪者。例如，在您管理一组被分配了必须在特定时间完成的任务的人的情况下，它会很有用。

该组件具有庞大的功能集，可帮助您管理和计划不同类型的活动。它具有所有基本功能，例如在时间线上平移和缩放。添加到时间线的项目可以移动或调整大小。您还可以选择为项目提供自己的自定义样式。还可以链接多个时间线，以便滚动其中一个同步移动其他时间线。

您还可以***不同的事件，以便在组件默认提供的内容上添加您自己的功能。

4.可见时间线

Vis 时间线库对于正在寻找可以创建交互式时间线和完全可定制的 2D 图形的数据可视化库的人们很有帮助。

该库具有大量功能。您可以将事件或数据分组以防止项目混合。但是，您也可以选择允许这种混合。您还可以在时间线上移动或放大和缩小以适应屏幕上的项目。时间刻度会自动调整，范围从毫秒到几年。

单个项目可以只有开始日期或开始日期和结束日期的组合。有很多方法可以为您创建的任何时间线设置样式。您可以更改网格背景或为不同的事件项目添加独特的类，以便为它们提供自己的样式。

该库还允许您使用条形图或折线图而不是线性时间线在 2D 图形上映射事件。

5.标签.js

很有可能您正在创建一个时间线，您必须在其中放置大量标签，因为它们发生在很短的时间内。您可以在时间线上用一个简单的点来标记时间，但是包含有关事件的更多信息的标签会占用额外的空间。这意味着不同标签之间有很大的重叠机会。Labella.js库会为您解决这个标签打包问题

关于 Labella.js 要记住的一件事是，它假设您已经实现或集成了自己的时间线。但是，如果您想使用带有 Labella 的所有功能同时还实现时间线功能的东西，您也可以使用另一个名为d3kit-timeline 的免费库。您将能够通过编写大约十几行代码来创建自己的标记时间线。

试玩交互式演示，了解如何创建自己的打包时间线标签。

6.时间线

Squarechip时间线库对于正在寻找轻量级且无依赖的时间线实现的人们来说是一个很好的选择。该库在渲染时间线时保持性能为重点。

您可以使用它来创建水平和垂直时间线。它们是响应式的，您可以配置一系列选项来设置它们，以便在宽度较小的屏幕上将水平时间轴更改为垂直时间轴。

即使该库是无依赖关系的，如果在网页上加载了 jQuery，它也会将自己注册为插件。您可以通过三种不同的方式创建和初始化时间线：使用普通的老式 JavaScript，使用 jQuery，或者通过在要显示时间线的元素上提供数据属性。

该库带有自己的最小样式，因此您可以轻松应用自己的样式而无需太多努力。您可以在官方网站上找到文档以及时间线的一些工作示例。

7.时间线故事讲述者

Timeline Storyteller库是功能最丰富的解决方案，适用于想要创建不限于简单的水平或垂直布局的时间线的人。它是由微软开发的，并带有一个巨大的功能集。

您可以以多种格式传递时间线数据，例如 csv、JSON 和 Google 电子表格。您可以使用各种属性将相关信息分配给不同的事件，但start_date实际上只有 是必需的，而其他则是可选的。

时间线上的数据可以以线性、径向、螺旋或网格格式以及其他布局表示。您还可以指定事件放置的时间范围。有一个绝对值的时间尺度，以及相对和对数尺度。考虑访问图书馆的画廊以查看您可以使用它创建的所有可能的布局。

8. D3 时间线

D3.js 库非常擅长可视化各种数据，时间线也不例外。您可以使用D3 时间线库，它基本上是 D3 的扩展，以便快速创建简单的时间线。

该库使用起来非常简单，但提供了多种用于在时间线上放置事件标签的选项。您可以轻松地创建带有或不带有轴的时间线。还有一个选项可以将圆形标签与矩形标签混合在一起，以便绘制在某个时间点和一段时间内发生的事件。事件标签可以堆叠并响应点击事件。

如果空间不足，您可以将自定义颜色添加到事件标签或旋转轴标签。存储库主页上提到了很多方法来自定义时间线的外观和行为。

最后的想法

时间线有很多实际应用，例如按时间顺序向用户呈现数据或在计划活动时与团队成员协调。在您自己的网站上创建时间线时，使用免费和开源的 JavaScript 时间线库可以为您节省大量时间。