關于swidget-timeline的使用和需要的檔案
在使用之前，你可以進入官方網站下載下傳源碼，或者直接使用附件中的源碼，附件中的源碼我将logo去掉了
樣式也做了修改，點選事件顯示的時候要顯示的時間我也給去掉了，主要是它的時間格式不是我們所需要的格式，改為我們需要的格式比較麻煩，接下來我根據我的使用介紹一下部分參數資訊
1.首先我們可以根據index.html或者jfk/jfk.html看到事例，
在jfk.html中
zones = [
{ start: "Sat Jan 01 2000 00:00:00 GMT+0800",
end: "Mon Dec 31 2020 00:00:00 GMT+0800",
magnify: 50,
unit: Timeline.DateTime.DAY,
multiple: 1
}];
上面的json資料可以有多個，我這兒隻是配了一個，自己根據需要配置，當然事例中是有多個的，我的事例中改為一個了，另外這個有多個實作父子層時間線的滾動效果
上面5個參數的含義
start:設定開始時間
end:設定結束時間位置
magnify:設定相鄰兩個時間點之間的間距
unit:設定時間機關，小時 分鐘 天 月份都行，但是都要以它的格式來定義，否則會報錯
var bandInfos = [//設定層
Timeline.createHotZoneBandInfo({
width: "70%", //上層所占百分比
intervalUnit: Timeline.DateTime.WEEK, //時間間隔屬性，實作上中下分層
intervalPixels: 220,
zones: zones,
eventSource: eventSource,
date: date,
timeZone: +8,
theme: theme
}),
Timeline.createHotZoneBandInfo({
width: "15%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 200,
zones: zones2,
eventSource: eventSource,
date: date,
timeZone: +8,
overview: true,
theme: theme
}),
Timeline.createHotZoneBandInfo({
width: "15%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 100,
zones: zones3,
eventSource: eventSource,
date: date,
timeZone: +8,
overview: true,
theme: theme
})
];
上面這段代碼是實作分層的效果，效果圖如下
實作3層時間關聯的代碼
//實作關聯代碼
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
bandInfos[2].syncWith = 0;
bandInfos[2].highlight = true;
預設隻有前兩行
2 關于資料的加載，timeline隻支援網絡加載的json檔案和xml檔案，其他的可支援的暫時不清楚，有知道的請分享一下
tl.loadXML("../xml/201405070513560007.xml", function(xml, url) { eventSource.loadXML(xml, url); });
3.xml作為資料檔案的參數資訊
isDuration="true"，是否持續顯示，true為顯示持續的線，false顯示為圓
link="http://www.baidu.com"
'title': 顯示的标題,
'image':此處為圖檔的連結位址,
'color':設定字型顔色
Xml中間的内容即點選之後的内容，同json檔案中的description中的内容
durationEvent="true" 讓持續顯示的線條顔色呈深色，否則為淺色
<!--EndFragment-->
4.json檔案作為資料格式
{
'dataTimeFormat': "iso8601",
'wikiURL': "http://simile.mit.edu/shelf/",
'wikiSection': "Simile Cubism Timeline",
'events' : [
{'start': 'Mon Nov 10 2013 12:12:12 GMT-0800',
'title': 'durationEvent false, start date',
'durationEvent' : false
},
{'start': 'Mon Nov 25 2013 13:13:13 GMT-0800',
'latestStart': 'Mon Nov 25 2013 15:13:13 GMT-0800',
'end': 'Tue Nov 26 2013 13:13:13 GMT-0800',
'description':'Welcome use Timeline!',
'title': 'durationEvent true, start, latestStart, end dates',
'image':'http://www.hua.com/flower_picture/meiguihua/images/r14.jpg',
'link':'http://www.baidu.com',
'isDuration':true,
'color':'#00FEFF',
'durationEvent' : false
},
......]
}
官網預設的含有datatimeformat：iso8601的時間格式，時間都是年為機關的eg：2014，此處我将本行去掉後，将時間格式改為了格林威治時間時間格式
使用xml作為資料源的配置檔案則需要将jfk.html或者index.html(顯示頁面)使用
使用json格式作為需将tl.loadXML()改為tl.loadJSON()
tl.loadXML("jfk.xml", function(xml, url) { eventSource.loadXML(xml, url); });
如果使用json檔案作為配置檔案則使用
tl.loadJSON("test.json",function(xml,url) { eventSource.loadJSON(xml, url); });
json檔案中的字段含義
'start': 開始時間,
'latestStart': 最近的時間,（時間不确定，如果含有此項則不會高亮顯示内容并且點選不會顯示出詳細的内容，參考https://code.google.com/p/simile-widgets/wiki/Timeline_EventSources）
'end': 結束時間,
'description':要顯示的内容,
'title': 顯示的标題,
'image':此處為圖檔的連結位址,
'link':點選完顯示的标題後标題對應的連結位址,
'isDuration':是否持續顯示（值為true|false）,
'color':标題顯示的顔色,
'durationEvent' : 是否為持續事件（true|false）如果為true在頁面上顯示的是一個線形，如果為false則顯示為小圓點選圖示，但在小圓事件上有一條線跟設定為true效果一緻
5.logo的去掉：
去掉logo timeline-bundle-debug.js 2882行 var elmtCopyright=SimileAjax.Graphics.createTranslucentImage下的classname和title去掉即可
Timeline-bundle.js 2885
var A=SimileAjax.Graphics.createTranslucentImage(Timeline.urlPrefix+(this.isHorizontal()?"":""));
A.className="timeline-copyright";
A.title="SIMILE Timeline - http://localhost:8080/timeline";
SimileAjax.DOM.registerEvent(A,"click",function(){window.location=http://localhost:8080/timeline;
});
6.隐藏預設的時間格式
将預設的時間格式隐藏：
在timeline-bundle.js中找到
4365行
var G = L.createElement("div");
this.fillTime(G, K);
//D.event.bubble.timeStyler(G);
A.appendChild(G);
将這段代碼注釋并将下列代碼注釋即可
4460行
,
timeStyler : function(A) {
A.className = "timeline-event-bubble-time";
A.setAttribute("style","visibility: hidden;");
}
注釋
添加
A.setAttribute("style", "display:none;");或者
A.setAttribute("style", "visibility: hidden");隻對chrome有效（本人使用的浏覽器）IE8無效
<!--EndFragment-->
7.該項目引入到自己的項目中
如果不做修改的話，最原始的是引入的官網的檔案，你斷網可能就無法顯示了
下面 timeline-api.js中位址改為自己的項目位置
if (typeof SimileAjax == "undefined" && !isCompiled) {
window.SimileAjax_onLoad = loadMe;//加載上面的loadme函數中的js檔案
//讀取simple-ajax-api.js
var url = useLocalResources ?
"http://localhost:8080/timeline/ajax/2.2.1/simile-ajax-api.js?bundle=false" :
//"http://127.0.0.1:9999/ajax/api/simile-ajax-api.js?bundle=false" :
//"D:/source/simile-widget/ajax/" + simile_ajax_ver + "/simile-ajax-api.js";
"http://localhost:8080/timeline/ajax/" + simile_ajax_ver + "/simile-ajax-api.js";
if (typeof Timeline_ajax_url == "string") {
url = Timeline_ajax_url;
}
<!--EndFragment-->
格式化後的位置大概在277行………………
如果有錯誤或者更好的意見請分享和指正！
<!--EndFragment--> 時間層在IE中顯示為方形箭頭，該處的樣式為了保持與其他浏覽器樣式一樣，找到timeline/api/timeline-bundle.js的109行和337行（該檔案未做修改的情況） if (SimileAjax.Platform.browser.isIE) { B.style.cursor = "move"; } 将上面的move改為pointer就是小手了，根據自己的需要做對應的修改。
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)