TimelineJS JSON 数据格式 - 译文 [原创]
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 对象。可以带有以下属性:
|
autolink |
否 | 布尔值(true 或 false)。 默认为 true,表示 Timeline 会扫描 text 字段并自动添加 <a> 标签,使得链接和邮件地址“可被点击”。如果设置为 false,在需要用到链接时仍可以在字段中手动添加 <a> 标签。本自动链接属性适用于 text 对象中的 text 字段,以及 media 对象中的 caption 和 credit 字段。 |
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 数据格式 - 译文 [原创]的更多相关文章
- 使用 json 模块,使json数据格式与Python字典dict数据格式互相转换,获取数据更加方便
一.定义 JSON 是一种数据格式 使用 javaScript (Java 死鬼破特)对象表示法 二.特点 1.JSON 与 XML格式数据的区别 ====== 两种格式的数据,都是跨语言,跨平台 c ...
- XML和JSON数据格式对比
概念 XML 扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语 ...
- VS快速生成JSON数据格式对应的实体
有固定好的Json数据格式,你还在手动敲对应的实体吗?有点low了!步入正题,这是一个json字符串,先去验证JSON数据格式(http://www.bejson.com/)如下: { & ...
- jQuery EasyUI:根据数据库内容生成适合于easyui-tree的JSON数据格式
1,jQuery EasyUI中easyui-tree特定的JSON数据格式 [ {"id":1,"text":"某公司","ch ...
- iOS 阶段学习第22天笔记(JSON数据格式介绍)
iOS学习(OC语言)知识点整理 一.JSON数据格式 1)概念:json是一种网络数据传输格式,有值/对象:{“A”:1,”B”:”2”…}词典:对象的序列:[,,,,,]数组两种数据类型 2)UR ...
- JS中将JSON的字符串解析成JSON数据格式《转》
在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的ea ...
- JSON 数据格式
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言.易于人阅读和编写,同时也易 ...
- JSON数据格式
JSON 数据格式 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言.易于人 ...
- MVC返回JSON数据格式书写方式
返回json数据格式,多个返回值加,隔开 [Route("api/users/web")] //如果不加这个路由请这样调用:/api/users/web?schoolname=十五 ...
随机推荐
- python设计模式之工厂模式
一.理解工厂模式 在面向对象编程中,术语“工厂”表示一个负责创建替他类型对象的类.通常情况下,作为一个工厂的类有一个对象以及与它关联的多个方法.客户端使用某些参数调用此方法,之后,工厂会据此创建所需类 ...
- java中的String类的不可变性的小例子
在java语言中,String类具有不可变性,即常量字符串不可更改.下面的一个小例子简单演示相关概念. public class test { public static void main(Stri ...
- November 14th, 2017 Week 46th Tuesday
Eternity is said not to be an extension of time but an absence of time. 永恒不是时间的无限延伸,而是没有时间. What is ...
- 陈远波(java)--Git 入门
本章节讲解思路:1.在Git hup官网注册一个Git账号:2.下载git bash管理工具 3.在git bash上绑定GitHup账号密码: 一:进入GitHup官网:https://githu ...
- Python3编写网络爬虫02-基本请求库requests的使用
一.requests 库使用 需要安装 pip install requests import requests #导入requests库 request = requests.get("h ...
- os.path.md
os.path 我们可以利用os.path模块提供的函数更容易地在跨平台上处理文件. 即使我们的程序不是用于夸平台, 也应该使用os.path来让路径名字更加可靠. Parsing Paths os. ...
- Python基础5
本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 嵌套函数 4.递归 5.匿名函数 6.函数式编程介绍 7.高阶函数 8.内置函数 温故知新 1. 集合 主要作用: 去重 关系测 ...
- js 判断元素是否在列表中
/** * 使用循环的方式判断一个元素是否存在于一个数组中 * @param {Object} arr 数组 * @param {Object} value 元素值 */ function isInA ...
- 利用单例模式设计数据库连接Model类
之前在<[php]利用php的构造函数与析构函数编写Mysql数据库查询类>(点击打开链接)写过的Mysql数据库查询类还不够完美,利用<[Java]单例模式>(点击打开链接) ...
- 2018-2019-2 20165302 《网络对抗技术》Exp4 恶意代码分析
实验要求 1.监控你自己系统的运行状态,看有没有可疑的程序在运行 2.分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,systracer套 ...