在明喻时间线中添加叠加

Question

我有一个问题，我想在时间线的两侧添加两个叠加层。 我们的想法是让它看起来像这样的模型： <一href="https://lh4.googleusercontent.com/-EUgq5L-gFgc/TsEgpPpyJ1I/AAAAAAAACEA/vbByi9CTIhk/s592/Capture%252520du%2525202011-11-14%25252014%25253A55%25253A14-m.png" rel="nofollow">https://lh4.googleusercontent.com/-EUgq5L-gFgc/TsEgpPpyJ1I/AAAAAAAACEA/ vbByi9CTIhk/s592/Capture%252520du%2525202011-11-14%25252014%25253A55%25253A14-m.png

但更重要的是，它将在时间轴中包含多个轨道（应用程序中代表每个人一个），并且我需要在每个轨道的两侧添加数据。我可以以任何我想要的方便形式获得数据，但我就是找不到如何实现它。 如果有人可以提供帮助，那将对我有很大帮助。 谢谢 ！

Answer 1

我回答我自己的问题，如果其他人有同样的问题，这里是代码：

var timeline;
function onLoad() {
if (typeof(timelineJsonObject)=='undefined' || timelineJsonObject===null) 
{
    return;
}

var overviewEvents = new Timeline.DefaultEventSource();
var events = new Array(timelineJsonObject.length);

var theme = Timeline.ClassicTheme.create();
    theme.event.tape.height = 24;

var overviewTheme = Timeline.ClassicTheme.create();
    overviewTheme.event.tape.height = 8;

var bandInfos = new Array(timelineJsonObject.length+1);
bandInfos[0] = Timeline.createBandInfo
    ({
        theme:          overviewTheme,
        layout:         'overview',
        eventSource:    overviewEvents,
        width:          "96px",
        intervalUnit:   Timeline.DateTime.MONTH, 
        intervalPixels: 32
    });

$($("td",  $($("#timelineTable tbody tr")[0]))[1]).attr("rowspan", timelineJsonObject.length+1);

$("#timeline").height((timelineJsonObject.length+1) * 96);

var cssClassMod = new Array(2);
cssClassMod[0] = "even";
cssClassMod[1] = "odd";

tableBody = $("#timelineTable tbody");

for (i = 0; i < timelineJsonObject.length; i++)
{
    events[i] = new Timeline.DefaultEventSource();

    bandInfos[i+1] = Timeline.createBandInfo
        ({
            theme:          theme,
            layout:         'original',
            eventSource:    events[i],
            width:          "96px",
            intervalUnit:   Timeline.DateTime.MONTH, 
            intervalPixels: 128
        });
    bandInfos[i+1].syncWith = i;
    bandInfos[i+1].highlight = true;

    events[i].loadJSON(timelineJsonObject[i][2], document.location.href);
    overviewEvents.loadJSON(timelineJsonObject[i][2], document.location.href);

    tableBody.append('<tr><td>' + timelineJsonObject[i][0] + '</td><td>' + timelineJsonObject[i][1] + '</td></tr>');
    $("tr", tablebody).last().addClass(cssClassMod[i%2]);
}

timeline = Timeline.create(document.getElementById("timeline"), bandInfos);

timeline.finishedEventLoading();
}