XQuery/创建时间线

动机

您想要创建一个事件数据的时间线。时间线在水平滚动视图中显示事件。

方法

我们将使用由 Simile-Widgets 项目提供的 JavaScript 客户端时间线小部件。在本例中，我们将使用时间线 2.2.0 API 调用。

为此，我们需要将事件日期列表转换为适当的格式，然后创建一个包含对 Simile JavaScript 库的调用的 HTML 页面。

步骤

查看示例事件 XML 文件格式
查看加载 XML 文件的 HTML 模板
创建生成 HTML 模板并加载相应 XML 数据文件的 XQuery 函数

我们的第一个示例将使用非持续时间事件（瞬时事件）列表。我们将在以后的章节中探讨持续时间事件和其他事件。

然后，我们将创建一个包含单个函数的简单 XQuery 模块，该函数加载一个简单的时间线。

使用标准 XML 日期格式的示例 XML 文件

大多数 XML 日期使用 ISO 8601 编码。要使用此格式，您必须在数据文件中放入日期格式属性。

<data date-time-format="iso8601">
    <event start="2009-01-01" isDuration="false">
        First Day January, 2009
    </event>
    <event start="2009-01-01" isDuration="false">
        First Day of the Feb, 2009
    </event>
</data>

请注意，数据文件必须指定用作 XML 日期格式的 ISO8601 日期格式。

HTML 驱动程序模板

示例 HTML 文件显示了如何使用 Timeline.loadXML() 函数加载此 XML 文件。

<html>
    <head>
        <script src="http://static.simile.mit.edu/timeline/api-2.2.0/timeline-api.js" type="text/javascript"></script>
        <script  type="text/javascript">
            <![CDATA[
var tl;


function onLoad() {
   var eventSource = new Timeline.DefaultEventSource();
   var bandInfos = [
     Timeline.createBandInfo({
         eventSource:    eventSource,
         date:           "Jan 01 2009 00:00:00 GMT",
         width:          "70%", 
         intervalUnit:   Timeline.DateTime.MONTH, 
         intervalPixels: 100
     }),
     Timeline.createBandInfo({
         eventSource:    eventSource,
         date:           "Jan 01 2009 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("example-01.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>  
    </head>
    <body onload="onLoad();" onresize="onResize();">
        <h1>Timeline Template</h1>
        <div id="my-timeline" style="height: 150px; border: 2px solid blue">
            
        </div>
        <noscript>
            This page uses Javascript to show you a Timeline. Please enable Javascript in your browser to see the full page. Thank you.
        </noscript>
    </body>
</html>

示例图像

这将生成以下示例

示例模块

非标准日期的格式

使用非标准 XML 日期格式的示例 XML 事件文件

<data>
    <event start="Jan 01 2009 00:00:00 GMT" isDuration="false"
        title="First Day of the New Year">
        First Day of the New Year</event>

    <event start="Feb 01 2009 00:00:00 GMT" isDuration="false"
        title="First Day of the Feb">
        First Day of the Feb</event>
</data>