如何使用 JavaScript 创建交互式时间线图

AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。

AnyChar HTML5图表高度可定制且高度兼容。拥有纯JavaScript API，AnyChart图表内置客户端数据实时更新，多层次向下钻区和具体参数更新。强大的主题引擎使你通过一系列图表进行独特的演示体验，而PDF和图像输出能产出图书质量打印文档。

点击下载AnyChart最新版

图表控件AnyChart教程：如何使用 JavaScript 创建交互式时间线图

我认为我们所有人都在某个地方遇到过时间线；作为传达时间顺序信息的一种方式，经典的时间线在传达信息的深度和“酷”因素方面都是无与伦比的，当以灵巧的创意触摸完成时。那么，话虽如此，您是否想学习如何使用 JavaScript 构建一个既美观又易于创建的时间线图表？跟着我一起来，我会通过一个实际的例子带你一步一步地开发你自己的 JS 时间线。

随着世界继续与 COVID-19 作斗争，人们期待已久的好消息是全球疫苗的开发。在这里，我决定建立一个互动时间表，展示辉瑞-BioNTech 疫苗在美国的开发阶段。为了添加更多上下文信息，我还想展示其他国家/地区的批准情况和一些相关事实，包括在美国批准使用的其他 3 种疫苗的开发日期。
最终，成品是这样的：

图表控件AnyChart教程：如何使用 JavaScript 创建交互式时间线图
分 4 步构建基本的 JavaScript 时间线图

即使没有太多的技术知识，创建图表和可视化数据实际上也很容易。当然，如果您具有 HTML 和 JavaScript 等技术的技能，则更容易掌握正在发生的事情，并且可以更快地安排更广泛的自定义。尽管如此，使用可用的JS 图表库之一进行数据可视化相当简单。所以，不用担心任何错误（好吧，不幸的是，我们不得不担心病毒），让我们第一次尝试使用 JavaScript 创建时间线。

首先要了解的是，并非所有 JavaScript 图表库都支持时间线图表。所以从逻辑上讲，首先要做的是找到一个这样做的。在本教程中，我决定使用AnyChart，因为它支持开箱即用的时间线，而且重量轻、灵活且易于使用，提供了大量文档和一个有助于练习代码的专用操场。所有这些都应该帮助您了解该过程的基础知识，无论您选择哪个特定库，这些基础知识往往都非常相似。

创建任何 JS 图表