未捕获的TypeError：无法读取chronoline.js中未定义的属性“length”

Question

JS。我正在使用循环填充数据，解析为json并给出此插件的有效输入但是我正在获取错误。我只是从函数sbuilder添加事件（） - ＆gt;人口之后我只是为那个特定的插件变量事件提供数据

我的代码：

  $(document).ready(function () {
        thirdtimeliner();
    });     

    function sbuilder() {
        var str = "";
        var i = 0;
        var today = new Date();
        var date = today.getDate();
        for (i; i <= date; i++) {
            str = str.concat("{dates:[new Date(2014,1," + i + ")] , title:'5GB', section:0 , attrs:{fill:'#468847',stroke:'#468847'}},");
        }
        var json = str.substring(0, str.length - 1);
        var events = "[" + json + "]";
        return events;
    }


   function thirdtimeliner() {
        var strin = sbuilder();
                alert(strin);
                var eventsr = JSON.stringify(eval("(" + strin + ")"));        
                alert(eventsr);

                var events = eventsr;
        var sections = [
                { dates: [new Date(2014, 1, 1), new Date(2014, 1, 12)],
                    title: "2014 Status",
                    section: 0,
                    attrs: { fill: "#dff0d8" },
                    draggable: true
                },
                { dates: [new Date(2014, 1, 10), new Date(2014, 1, 11)],
                    title: "2GB",
                    section: 0,
                    attrs: { fill: "#dff0d8" },
                    draggable: true
                },
                { dates: [new Date(2014, 1, 11), new Date(2014, 1, 12)],
                    title: "2GB",
                    section: 0,
                    attrs: { fill: "#dff0d8" },
                    draggable: true
                },
                { dates: [new Date(2014, 1, 12), new Date(2014, 1, 13)],
                    title: "processing..",
                    section: 0,
                    attrs: { fill: "#FFDE00" },
                    draggable: true
                },
                { dates: [new Date(2014, 0, 1), new Date(2014, 1, 8)],
                    title: "2014 Status",
                    section: 0,
                    attrs: { fill: "#ccc" },
                    draggable: true
                }
            ];


        var timeline1 = new Chronoline(document.getElementById("target1"), events,
    { animated: true,
        tooltips: true,
        defaultStartDate: new Date(),
        sections: sections,
        sectionLabelAttrs: { 'fill': '#997e3d', 'font-weight': 'bold' }
    });

    }

预期产出：

Answer 1

问题在于事件变量。您将事件作为字符串发送（但chronoline需要一个数组对象）。

 var timeline1 = new Chronoline(document.getElementById("target1"), events,
{ animated: true,
    tooltips: true,
    defaultStartDate: new Date(),
    sections: sections,
    sectionLabelAttrs: { 'fill': '#997e3d', 'font-weight': 'bold' }
});

但是在chronoline.js中，事件被视为数组

for(var i = 0; i < events.length; i++){
    for(var j = 0; j < events[i].dates.length; j++){
        events[i].dates[j] = new Date(events[i].dates[j].getTime());
        events[i].dates[j].stripTime();
    }
}

并且您发送的事件字符串将类似于

"[{"dates":["2014-01-30T18:30:00.000Z"],"title":"5GB","section":0,"attrs": {"fill":"#468847","stroke":"#468847"}},...]"

所以事件[0]是'['，事件[1]是'{'，事件[2]是'''，事件[3]是'd'等等......

在您的情况下，事件[i] .date未定义，因此您收到错误

Cannot read property 'length' of undefined

请检查您的代码并发送适当的对象数组

Answer 2

用此替换您的代码。

$(document).ready(function () {
    thirdtimeliner();
});     

function sbuilder() {
    var array = new Array();
    var i = 0;
    var date = new Date().getDate();
    for (i; i <= date; i++) {
        array.push({dates:[new Date(2014,1,i)] , title:'5GB', section:0 , attrs:{fill:'#468847',stroke:'#468847'}});
    }
    return array;
}

function thirdtimeliner() {
    var events = sbuilder();

    var sections = [
            { dates: [new Date(2014, 1, 1), new Date(2014, 1, 12)],
                title: "2014 Status",
                section: 0,
                attrs: { fill: "#dff0d8" },
                draggable: true
            },
            { dates: [new Date(2014, 1, 10), new Date(2014, 1, 11)],
                title: "2GB",
                section: 0,
                attrs: { fill: "#dff0d8" },
                draggable: true
            },
            { dates: [new Date(2014, 1, 11), new Date(2014, 1, 12)],
                title: "2GB",
                section: 0,
                attrs: { fill: "#dff0d8" },
                draggable: true
            },
            { dates: [new Date(2014, 1, 12), new Date(2014, 1, 13)],
                title: "processing..",
                section: 0,
                attrs: { fill: "#FFDE00" },
                draggable: true
            },
            { dates: [new Date(2014, 0, 1), new Date(2014, 1, 8)],
                title: "2014 Status",
                section: 0,
                attrs: { fill: "#ccc" },
                draggable: true
            }
        ];


    var timeline1 = new Chronoline(document.getElementById("target1"), events,
{ animated: true,
    tooltips: true,
    defaultStartDate: new Date(),
    sections: sections,
    sectionLabelAttrs: { 'fill': '#997e3d', 'font-weight': 'bold' }
});

}

希望这会奏效。 ：）