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>