TimelineJS 是用于绘制时间轴的 Javascript 开源脚本,目前是 TimelineJS3 版。参阅 https://github.com/NUKnightLab/TimelineJS3
原文:https://timeline.knightlab.com/docs/json-format.html
译文:http://www.cnblogs.com/popapa/p/timelinejs_data.html
采集日期:2018-5-29

TimelineJS JSON 数据格式

Timeline 需要将事件相关的数据显示出来,多数人喜欢用 Google spreadsheet 配置 Timeline 数据。
但如果想编写代码动态创建或更新时间轴,则需要了解生成结构化数据的方法。

如果只是想速战速决,或许复制一份示例数据(比如 Whitney Houston)就可以了。
不然的话,就请阅读完整的文档,如下所示。

当知道如何为时间轴创建 JSON 数据后,还需要将其放在页面上

TimelineJS 的 JSON 格式数据由一个 JSON 对象组成,包含以下属性:

名称 是否必填 说明
events 由 slide 对象组成的 JSON 列表(参阅下文
title  slide 对象(参阅下文
eras 由 era 对象(参阅下文)构成的 JSON 列表
scale human cosmological。未给出时的缺省值为human。当时间为非常遥远的古代或将来时,才会用到 cosmological。(早于公元前271821年4月20日星期二,或者晚于公元275760年9月13日星期六。)使用 cosmological 时,最小刻度单位是“年”。不过公元前271821年和公元275760年之间的时间,也是可以用 cosmological 的。

Slide 对象 带有以下属性:

名称 是否必填 说明
start_date 是(对 title 除外) date 对象(参阅下文
end_date date 对象(参阅下文
text 否(但推荐给出) text 对象(参阅下文)
media media 对象(参阅下文
group 可填入任意文本。如果给出,则 Timeline 会将 group 值相同的事件归在同一行或相邻行,以明显与其他组的事件分隔开。同组的 group 值会作为标签显示在导航条的左侧。
display_date Timeline 显示日期时用到的字符串。如果给出本值,就会覆盖此事件的开始或结束日期中的 display_date 值。如果要表达两个日期之间的相互关系,本值就非常有用。
background Javascript 对象。可以带有以下属性:

url:指向背景图片的完全限定格式 URL

color:十六进制格式的 CSS 色彩值(如:#0f9bd1),或者合法的CSS 色彩关键字

autolink 布尔值(truefalse)。 默认为 true,表示 Timeline 会扫描 text 字段并自动添加 <a> 标签,使得链接和邮件地址“可被点击”。如果设置为 false,在需要用到链接时仍可以在字段中手动添加 <a> 标签。本自动链接属性适用于 text 对象中的 text 字段,以及 media 对象中的 captioncredit 字段。
unique_id 在 Timeline 所有 slide 中保持唯一的字符串值。如果未指定,TimelineJS 将根据标题构建一个 ID。但如果以后对标题进行了修改,自动生成的 ID 也将会随着更改。当在配置中启用了 hash_bookmark 参数时,本值才会生效。还可以与timeline.goToId()方法配合起来使用,以编程方式将时间线移动到指定的 slide。

Era 对象用于在时间轴导航组件上标记一段时间。本质上是个加了严格限制的 slide 对象。

名称 是否必填 说明
start_date date 对象(参阅下文
end_date date 对象(参阅下文
text 否(但推荐给出) text 对象(参阅下文)

Date 对象带有以下属性:

名称 是否必填 说明
year 数字格式,不要用逗号。公元前要用负值表示,而不要用“BC”、“BCE”等字母标识。
month 数字 1-12。Javascript 高手请勿自作聪明,Timeline 不采用 Javascript 那种古怪的用法,比如用“0”表示一月。
day 数字格式。
hour 数字 0-23。
minute 数字 0-59。
second 数字 0-59。
millisecond 数字格式。
display_date 代表本日期的字符串。当 Timeline 的日期格式不满足需求时,就很有用了。

Text 对象带有以下属性。slide 的 text 是可选项。

名称 是否必填 说明
headline 任意文本。可以包含 HTML 标记,也可以为空。
text 任意文本。可以包含 HTML 标记,也可以为空。对 era 对象不适用。

Media 对象带有以下属性。slide 的 Media 是可选项。

名称 是否必填 说明
url 多数情况下是个 URL,完整说明详见media 类型文档类型文档。
caption 任意文本。可以包含 HTML 标记。
credit 任意文本。可以包含 HTML 标记。
thumbnail 指向图片的 URL,供事件的 timenav 标记使用。如果省略,Timeline 将根据媒体类型自行选择图标。本属性与 title 型 slide 无关,因为它们不带标记。
alt 供图片的 alt 标记使用。如果未给出,则会用已给出的 caption。
title 图片的 title。如果未给出,则会用已给出的 caption。
link_target 如果用到了 link,则可供其 target 使用。

TimelineJS JSON 数据格式 - 译文 [原创]的更多相关文章

  1. 使用 json 模块,使json数据格式与Python字典dict数据格式互相转换,获取数据更加方便

    一.定义 JSON 是一种数据格式 使用 javaScript (Java 死鬼破特)对象表示法 二.特点 1.JSON 与 XML格式数据的区别 ====== 两种格式的数据,都是跨语言,跨平台 c ...

  2. XML和JSON数据格式对比

    概念 XML 扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语 ...

  3. VS快速生成JSON数据格式对应的实体

          有固定好的Json数据格式,你还在手动敲对应的实体吗?有点low了!步入正题,这是一个json字符串,先去验证JSON数据格式(http://www.bejson.com/)如下: { & ...

  4. jQuery EasyUI:根据数据库内容生成适合于easyui-tree的JSON数据格式

    1,jQuery EasyUI中easyui-tree特定的JSON数据格式 [ {"id":1,"text":"某公司","ch ...

  5. iOS 阶段学习第22天笔记(JSON数据格式介绍)

    iOS学习(OC语言)知识点整理 一.JSON数据格式 1)概念:json是一种网络数据传输格式,有值/对象:{“A”:1,”B”:”2”…}词典:对象的序列:[,,,,,]数组两种数据类型 2)UR ...

  6. JS中将JSON的字符串解析成JSON数据格式《转》

    在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的ea ...

  7. JSON 数据格式

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言.易于人阅读和编写,同时也易 ...

  8. JSON数据格式

    JSON 数据格式 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言.易于人 ...

  9. MVC返回JSON数据格式书写方式

    返回json数据格式,多个返回值加,隔开 [Route("api/users/web")] //如果不加这个路由请这样调用:/api/users/web?schoolname=十五 ...

随机推荐

  1. No module named 'MySQLdb' Python3 + Django 2.0.3 + mysql 无法连接

    问题概览: 学习Django连接mysql数据库的时候遇到了问题 首先安装mysql(Python 3不支持MySQL-python): pip install pymysql 进入编辑 settin ...

  2. WINDOWS SOCKET编程中accept出来的新连接是阻塞还是非阻塞

    实践证明 SOCKET hNewSock=accept(hListenSock) 当hListenSock为阻塞模型时,hNewSock则为阻塞模型 否则 当hListenSock为非阻塞模型时,hN ...

  3. MMIO----Wav格式文件解析

    DirectSound只支持Wav格式的音频文件,在创建次缓冲区之前需要先确定播放的Wav音频数据的格式.如果是从本地Wav文件播放,则需要先读出它的数据格式. 1. Wav音频格式布局 Wav是WA ...

  4. mnist手写数字检测

    # -*- coding: utf-8 -*- """ Created on Tue Apr 23 06:16:04 2019 @author: 92958 " ...

  5. 【Alpha 冲刺】 9/12

    今日任务总结 人员 今日原定任务 完成情况 遇到问题 贡献值 胡武成 完善API文档,并初步使用SpringMVC产生编写部分API 已完成 孙浩楷 完成课程通知页面(及发布通知的弹窗) 已完成 胡冰 ...

  6. C 语言之预处理 ---------文件包括

    文件包括是C预处理程序的还有一个重要功能. 文件包括命令行的一般形式为: #include"文件名称" 在前面我们已多次用此命令包括过库函数的头文件. 比如: #include&q ...

  7. JSON无限折叠菜单编写

    最近看了一篇关于JSON无限折叠菜单的文章 感觉写的不错,也研究了下代码,所以用自己编码方式也做了个demo 其实这样的菜单项在我们网站上或者项目导航菜单项很常见的一种效果,特别是在一些电子商务网上上 ...

  8. Python2.7-stat

    stat模块,用于解释 os.stat(),os.lstat(),os.fstat() 返回的结果,定义了许多表示文件或路径的各个状态的常数和测试各个状态的函数具体参考 官方文档 和 http://w ...

  9. MVC 如何在action中获取当前网站的根路径

    如果基于MVC搭建的网站在IIS发布的是一个单独的端口,那么可以直接通过后面语句获得跟路径:Request.Url.GetLeftPart(UriPartial.Authority).ToString ...

  10. CISCN 应用环境相关指令备忘录

    1 - 关于Python环境的 使用Anaconda2管理Python环境 1.1 - 安装 官网下载安装包下载. 1.2 - 创建Python环境 localhost:template mac$ c ...