TimelineJS3 项目：如何通过JavaScript实例化时间线

缪玺彬

于 2025-06-19 09:09:55 发布

阅读量386

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/gitblog_00143/article/details/148755316

TimelineJS3 项目：如何通过JavaScript实例化时间线

概述

TimelineJS3 是一个强大的开源工具，用于创建交互式时间线展示。虽然大多数用户可以通过简单的可视化工具快速创建时间线，但开发者可能需要通过JavaScript直接实例化时间线以实现更高级的定制化需求。本文将详细介绍如何使用JavaScript在网页中嵌入和配置TimelineJS3时间线。

基础集成步骤

要在网页中嵌入TimelineJS3时间线，需要完成以下三个核心步骤：

引入CSS样式表：加载TimelineJS3的默认样式
引入JavaScript库：加载TimelineJS3的核心功能
实例化时间线对象：创建并配置时间线实例

<!-- 1. 引入CSS -->
<link title="timeline-styles" rel="stylesheet" 
      href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">

<!-- 2. 引入JS库 -->
<script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>

<!-- 容器元素 -->
<div id='timeline-embed' style="width: 100%; height: 600px"></div>

<!-- 3. 实例化时间线 -->
<script type="text/javascript">
    timeline = new TL.Timeline('timeline-embed',
    'https://docs.google.com/spreadsheets/d/1cWqQBZCkX9GpzFtxCWHoqFXCHg-ylTVUWlnrdYMzKUI/pubhtml');
</script>

数据源配置

TimelineJS3支持多种数据源格式，开发者可以根据需求选择最适合的方式：

1. 使用Google表格

这是最简单的方式，只需提供Google表格的公开URL即可：

new TL.Timeline('timeline-embed', 'GOOGLE_SHEETS_URL');

2. 使用JSON数据

可以直接传递JSON对象作为数据源：

var timeline_json = {
    // 符合TimelineJS3规范的JSON数据
};
new TL.Timeline('timeline-embed', timeline_json);

3. 从URL加载JSON

也可以从服务器加载JSON文件：

new TL.Timeline('timeline-embed', 'path/to/your/timeline.json');

注意：跨域请求JSON文件需要服务器配置CORS支持。

高级配置选项

TimelineJS3提供了丰富的配置选项，可以通过第三个参数传递给构造函数：

var options = {
    start_at_end: true,          // 从时间线末尾开始
    default_bg_color: {r:0, g:0, b:0},  // 默认背景色
    timenav_height: 250,         // 时间导航栏高度
    language: "zh-cn",           // 设置语言为简体中文
    zoom_sequence: [0.5, 1, 2, 3] // 自定义缩放级别
};

new TL.Timeline('timeline-embed', timelineData, options);

字体定制

TimelineJS3提供了多种预设字体组合，也可以完全自定义字体：

使用预设字体

var options = {
    font: 'opensans-gentiumbook'  // 使用预设字体组合
};

自定义字体

创建自定义CSS文件定义字体
在页面中引入该CSS文件
配置TimelineJS3使用自定义字体

<link rel="stylesheet" href="/css/my-custom-fonts.css">
<script>
    new TL.Timeline('timeline-embed', data, {font: null});
</script>

本地文件部署

如果需要在本地环境中部署TimelineJS3：

下载完整的TimelineJS3包
解压并部署到服务器
修改资源引用路径为本地路径

<link rel="stylesheet" href="/path/to/timeline.css">
<script src="/path/to/timeline.js"></script>

重要配置：script_path

当使用本地文件时，必须正确设置script_path选项以确保字体和语言文件能正确加载：

var options = {
    script_path: '/path/to/timeline/js/',  // 必须以斜杠结尾
    language: 'zh-cn',                   // 使用简体中文
    font: 'bitter-raleway'               // 使用特定字体组合
};