我遇到了一个问题我想在时间轴的两侧添加两个叠加层。 这个想法是让它看起来像这个模型: https://lh4.googleusercontent.com/-EUgq5L-gFgc/TsEgpPpyJ1I/AAAAAAAACEA/vbByi9CTIhk/s592/Capture%252520du%2525202011-11-14%25252014%25253A55%25253A14-m.png
但更重要的是它会在时间轴中有几个曲目(每个人在应用中代表一个曲目),我需要在每个曲目的两侧添加数据。我可以以任何方便的形式获取数据,但我找不到如何实现它。 如果有人可以提供帮助,那将对我有所帮助。 谢谢!
答案 0 :(得分: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();
}