Question

我正在尝试将动态创建的JSON对象加载到TimelineJS中，但无法找出以下代码的错误。每当我将对象输出到控制台时，我都会获得正确的JSON文件。从控制台复制，然后将其加载到TimelineJS工作，但每当我尝试将其直接加载到TimelineJS时，它不起作用。请参见JSFiddle：http://jsfiddle.net/xited/Y5hBk/6/

HTML代码：

<div id="my-timeline"></div>
<button id='myBtn'>start</button>

JS代码：

$('#myBtn').click(function() {
     makeJson();
});


function loadData(json){
        createStoryJS({
        type:       'timeline',
        width:      '800',
        height:     '600',
        source:     json,
        embed_id:   'my-timeline'
    });
}

function makeJson(){
    //create timeline json object
    var jsonObj = function(timeline){
        this.timeline=timeline;
    }

    var timelineObj = function (headline, type, text, date, era)
    {
        this.headline=headline;
        this.type=type;
        this.text=text;
        this.date=date;
        this.era=era;
    }

    var dates= new Array();

    var dateObj =  function(startDate, endDate, headline, text, tag)
            {
                this.startDate=startDate;
                this.endDate=endDate;
                this.headline=headline;
                this.text=text;
                this.tag=tag;
            }

    var eras = new Array();

    var eraObj= function(startDate, endDate, headline, text, tag)
    {
            this.startDate=startDate;
            this.endDate=endDate;
            this.headline=headline;
            this.text=text;
            this.tag=tag;
        }

    var data = [['Animal','Food','Qty','Begin Date','End Date'],
                ['deer','grass','430','1/1/2014','1/5/2014'],
                ['cat','fish','20','2/1/2014','7/5/2014'],
                ['eagle','mice','100','3/1/2014','9/1/2014']];

    //get position of an element from the data array
    var pos = function (el){
        var colHeaders = data[0]; // reading header row
        return colHeaders.indexOf(el) //return position of el
    }

    for (var i=1; i<data.length; i++){
        beginDate=data[i][pos('Begin Date')];
        endDate=data[i][pos('End Date')];
        headline=data[i][pos('Animal')];
        text=data[i][pos('Food')];
        tag=data[i][pos('Qty')];
        var projectDate = new dateObj(beginDate,endDate,headline,text,tag);
        dates.push(projectDate);
    }

    var swEra = new eraObj('2000','2020','era headline','era text','era tag');
    eras.push(swEra);

    //build json obj
    var swTimeline = new timelineObj(
        'A New Timeline',
        'default',
        '<p>This is a paragraph.</p>',
        dates,
        eras);


    var jsonTimeline = new jsonObj(swTimeline);

    //stringifying the json object
    jsonTimeline = JSON.stringify(jsonTimeline);
    console.log(jsonTimeline);

    loadData(jsonTimeline);
}

Answer 1

function loadData(jsonTimeline){}使用而非使用function loadData(json){}。

Live Demo

Answer 2

似乎TimelineJS不喜欢动态创建的JSON文件。临时解决方案是使用以下函数将JSON文件写入页面：

function addCode(code){
    var JS= document.createElement('script');
    JS.text= code;
    document.body.appendChild(JS);
}

然后将其加载到TimelineJS中，新的时间轴将正确显示。

请参阅以下jsfiddle：http://jsfiddle.net/xited/Y5hBk/10/

将动态创建的JSON加载到TimelineJS中

2 个答案: