Timeline JS 是一个用来生成时间轴的 JS 库,具体效果可以参考官网提供的例子。官网提供了向导,只需要把数据填入 Google Spreadsheet 模板,然后设置 Spreadsheet 网址和相关选项就可以生成时间轴。

不想用这个方法的,可以把数据存入 json,用 JS 处理。(注意:Timeline JS 最新版本是 v3,是之前版本的重写,和旧版本的 json 不兼容。)

<!--引用 CSS-->
<link title="timeline-styles" rel="stylesheet" href="https://cdn.knightlab.com/libs/timeline3/latest/css/timeline.css">
<!--引用 JS-->
<script src="https://cdn.knightlab.com/libs/timeline3/latest/js/timeline.js"></script>

<!--显示时间轴的容器-->
<div id='timeline-embed' style="width: 100%; height: 600px"></div>

<!--读取 json 数据-->
<script type="text/javascript">
	const endpoint = './timeline.json'
    <!--选项设置,可选参数-->
	const options = {default_bg_color: "black"}
	fetch(endpoint)
		.then(res => res.json())
		.then(data => window.timeline = new TL.Timeline('timeline-embed', data, options))
</script>

TimelineJS JSON 文件格式比较简单,也可以先参考官网提供的 Whitney Houston,在此基础上尝试修改。

如果是拿来直接用,不考虑自定义的工作的话,代码的工作没什么,主要是编辑 json 数据文件。接下来要找一款好用的 json 编辑工具,否则有时逗号多一个少一个,不是边改边调试的话,可能要找很久。

开发这款工具的西北大学 Knight Lab 把它归类为 Storytelling 工具。掌握了使用锤子之后,就需要考虑哪些可以是钉子。历史、个人生平等时间相关的材料都可以这样组织,编辑的工作会繁琐一些,但是这种可以交互的可视文稿用来作为参考脉络清晰,比 ppt 会更加有趣。

参照维基百科 List of English monarchs 试做了几页,甚合我意。代码就不放了,截个图。

timeline-js

一直有的另一个问题是和地图相关的材料怎样组织和展示,Knight Lab 另有其它的 Storytelling 工具,其中一款是 StoryMapJS,之后会试试看。

其它