1

我在网上搜索如何做时间线。我找到了我喜欢的这个：http ://www.simile-widgets.org/timeline/

所以我尝试遵循他们的教程，可以在这里找到：http ://simile.mit.edu/wiki/How_to_Create_Timelines

我按照教程进行操作，因此代码是相同的，但在这里： 

<script>
   var tl;
function onLoad() {
var eventSource = new Timeline.DefaultEventSource();

var bandInfos = [
Timeline.createBandInfo({
    eventSource:    eventSource,
    date:           "Jun 28 2006 00:00:00 GMT",

    width:          "70%", 
    intervalUnit:   Timeline.DateTime.MONTH, 
    intervalPixels: 100
}),
Timeline.createBandInfo({
    eventSource:    eventSource,
    date:           "Jun 28 2006 00:00:00 GMT",

    width:          "30%", 
    intervalUnit:   Timeline.DateTime.YEAR, 
    intervalPixels: 200
})
  ];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;

tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
Timeline.loadXML("test.xml", function(xml, url) { eventSource.loadXML(xml, url); });

}

var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
    resizeTimerID = window.setTimeout(function() {
        resizeTimerID = null;
        tl.layout();
    }, 500);
}
}

</script>
<body onload="onLoad();" onresize="onResize();">
<div id="my-timeline" style="height: 150px; border: 1px solid #aaa"></div>
</body>

和 test.xml

 <?xml version="1.0" encoding="ISO-8859-1"?>
 <?xml-stylesheet type="text/css" href="/TBDBsite/media/timeline.css"?>
 <data>
<event 
    start="May 28 2006 09:00:00 GMT"
    end="Jun 15 2006 09:00:00 GMT"
    isDuration="true"
    title="Writing Timeline documentation"
    image="http://simile.mit.edu/images/csail-logo.gif"
    >
    A few days to write some documentation for <a href="http://simile.mit.edu/timeline/">Timeline</a>.
    </event>

<event 
    start="Jun 16 2006 00:00:00 GMT"
    end="Jun 26 2006 00:00:00 GMT"
    title="Friend's wedding"
    >
    I'm not sure precisely when my friend's wedding is.
    </event>

<event 
    start="Aug 02 2006 00:00:00 GMT"
    title="Trip to Beijing"
    link="http://travel.yahoo.com/"
    >
    Woohoo!
    </event>
 </data>

我在加载 XML 时遇到问题，我将他们的 XML 示例文件保存在与模板相同的位置，但是当我刷新页面时出现此错误：

无法从 test.xml 加载数据 xml 未
找到

我想知道是否有人知道为什么或解决这个问题。我的想法是将我的数据保存到一些 XML 文件中，但也许这不是最好的解决方案。
如果有人有更好的想法来制作时间线，我也将不胜感激。

谢谢！

4

2 回答 2

3

回复比较晚，但是错误是由包含 xml 声明的数据文件引起的。时间线小部件仅以开头的 xml 除外

<data>
于 2012-04-13T00:07:28.400 回答
0

您是否尝试过使用 xml 的完整 url 路径？类似“ http://localhost/text.xml ”的东西..或者可能是相对路径“./test.xml”

于 2010-08-31T09:55:12.047 回答