zoukankan      html  css  js  c++  java
  • 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 对象。可以带有以下属性:

    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 使用。
  • 相关阅读:
    【C#进阶系列】06 类型和成员基础
    纪中5日T1 1564. 旅游
    纪中17日T1 2321. 方程
    纪中17日T2 2322. capacitor
    纪中10日T1 2313. 动态仙人掌
    纪中14日听课小结 图论 最短路 二分图 差分约束
    一个抓猫的游戏 消遣GAME 持续更新中!
    洛谷P1464 Function  HDU P1579 Function Run Fun
    洛谷P1976 鸡蛋饼
    纪中12日T1 2307. 选择
  • 原文地址:https://www.cnblogs.com/popapa/p/timelinejs_data.html
Copyright © 2011-2022 走看看