Question

我使用SMILES timeline加载事件数据作为文件中的JSON和变量。

使用主页中的示例代码正确加载文件：

tl = Timeline.create(document.getElementById("div-timeline"), bandInfos);
     Timeline.loadJSON("js/timelinedata.json", function(json, url) {
         eventSource.loadJSON(json, url); });

以下是我的文件timelinedata.json的内容：

{"dateTimeFormat": "iso8601",
"events" : [
        {"start": "1924",
        "title": "Barfusserkirche",
        "description": "by Lyonel Feininger, American/German Painter, 1871-1956",
        "image": "link to an image",
        "link": "link to an article"
        }
]}

然而，当我将JSON粘贴到var并尝试加载它时，我会抱怨。

这是我填充我的var：

的方式

function TimeTestData1(){
    var TimelineEvent =  {"dateTimeFormat": "iso8601",
    "events" : [
            {"start": "1924",
            "title": "Barfusserkirche",
            "description": "by Lyonel Feininger, American/German Painter, 1871-1956",
            "image": "link to an image",
           "link": "link to an article"
            }
    ]};
    return TimelineEvent;
  }

并在时间轴中使用它：

var tdata = TimeTestData1();
console.dir(tdata); // this looks fine
// [ timeline code ]
Timeline.loadJSON(tdata, function(json, url) { eventSource.loadJSON(json, url); });

我得到一个＆＃34;警报＆＃34;弹出消息：

Failed to load json data from [object Object] Not Found

当我像这样使用JSON.stringify(tdata)时：

Timeline.loadJSON(JSON.stringify(tdata), function(json, url) {
    eventSource.loadJSON(json, url); });

浏览器告诉我（使用警告弹出窗口）：

无法从{＆＃34; dateTimeFormat＆＃34;：＆＃34; iso8601＆＃34;，＆＃34; events＆＃34;：[{＆＃34; start＆＃34;：1924，＆＃34;标题＆＃34;：＆＃34; Barfusserkirche＆＃34;，＆＃34;描述＆＃34;：＆＃34;由Lyonel Feininger，美国/德国画家，1871-1956＆＃34;，＆＃34; ;图像＆＃34;：＆＃34;链接到图像＆＃34;，＆＃34;链接＆＃34;：＆＃34;链接到文章＆＃34;}]} 找不到

这是时间轴功能的完整代码：

function LoadTimeline() {
    var tl;
    var eventSource = new Timeline.DefaultEventSource(0);
    //var tdata = TimeTestData1();
    var theme = Timeline.ClassicTheme.create();
    theme.timeline_start = new Date(Date.UTC(1890, 0, 1));
    theme.timeline_stop  = new Date(Date.UTC(2020, 0, 1));
    var d = Timeline.DateTime.parseGregorianDateTime("1950") // set date to display
    var bandInfos = [
        Timeline.createBandInfo({
            width:          "70%",
            intervalUnit:   Timeline.DateTime.YEAR,
            intervalPixels: 100,
        eventSource:    eventSource,
                date:           d
        }),
        Timeline.createBandInfo({
            width:          "30%", 
            intervalUnit:   Timeline.DateTime.CENTURY,
        eventSource:    eventSource,
            date:           d,
            intervalPixels: 200
        })
    ];
    bandInfos[1].syncWith = 0;
    bandInfos[1].highlight = true;
    tl = Timeline.create(document.getElementById("div-timeline"), bandInfos);
    Timeline.loadJSON("js/timelinedata.json", function(json, url) {
        eventSource.loadJSON(json, url); });
    } //JSON.stringify(tdata) or tdata or  "js/timelinedata.json"

我如何传递我的事件json var所以时间轴吃它？

Answer 1

Timeline.loadJSON需要一个网址，而不是JSON。请尝试完全删除该通话，只需拨打eventSource.loadJSON(tdata, url);即可。（在这种情况下，不确定url-parameter的用途是什么，文档看起来对这个项目来说非常糟糕）

Answer 2

不确定是否有人会看到此消息，但是loadJSON（）期望将JSON对象作为第一个参数，而不是字符串（这就是通过说JSON.stringify（）所做的事情）。因此，只要tdata是与时间轴兼容的JSON对象，那么您要做的就是

eventSource.loadJSON(tdata, window.location.href)

从文件加载JSON，作为时间轴事件的变量

2 个答案: