Timeline JS：如何设置时间线开始日期？

Posted 2023-05-09

【中文标题】Timeline JS：如何设置时间线开始日期？

【英文标题】：Timeline JS: How to set timeline start date?

【发布时间】：2012-09-19 20:54:01

【问题描述】：

我一直在使用来自 here 的 TimelineJS 和 JSON 版本的数据检索。它工作正常，但我无法调整时间线开始的日期。

在文档中说要这样设置 JSON 文件：

    
        "timeline":
        
            "headline":"The Main Timeline Headline Goes here",
            "type":"default",
            "startDate":"1888",
            "text":"<p>Intro body text goes here, some html is ok</p>",

我已经复制了这个，但只是更改了细节，例如：

    "timeline":
    
        "headline":"HOT LATIN EVENTS",
        "type":"default",
        "startDate":"2012,09,30",
        "text":"Scroll through a list of Latin Music events>>> ",
        "date": [

             
                "startDate":"2012,08,24",
                "headline":"PELIGRO Y SU BANDA  - Melbourne",
                "text":"<p><strong>Copacaban International</strong>, 139 Smith Street, Fitzroy, 3065</p>",
                "asset":
                
                    "media":"http://www.clavecontraclave.com/Peligro%20-%20Melbourne%20klein.jpg",
                    "credit":"",
                    "caption":""
                
            ,

我也尝试在startDate 中仅使用一年（例如：2011），但没有效果。时间线从下面的第一个事件开始。

有人知道怎么回事吗？

谢谢

【问题讨论】：

我也遇到了 Timeline.js 的问题。我什至无法让它工作。

【参考方案1】：

我还没有找到直接指定时间线开始日期的方法，但您可以遍历时间线幻灯片以找到最接近的匹配项，然后使用该幻灯片的索引作为您的 start_at_slide 值。例如：

var timeline_dates = data_source.timeline.date;
var start_index = 0;
var target_date = new Date(); //set whatever date you want as your start date
for(x in timeline_dates) 
    var slide_date = new Date( timeline_dates[x].startDate );
    if( slide_date < target_date) start_index++;

然后当你实例化你的时间线时，你会像这样使用它：

createStoryJS(
    type:       'timeline',
    width:      '800',
    height:     '400',
    source:     data_source,
    embed_id:   'timeline_container',
    start_at_slide: start_index
);

【讨论】：

感谢这个创新的想法。

仅供参考，这是 TimelineJS 配置选项的直接链接（特别是“start at slide”属性）：github.com/NUKnightLab/TimelineJS#start-at-slide