关于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";
/**
"./api/simile-ajax-api.js?bundle=false":
"./" + simile_ajax_ver + "/simile-ajax-api.js";*/
if (typeof Timeline_ajax_url == "string") {
url = Timeline_ajax_url;
}
<!--EndFragment-->
格式化后的位置大概在277行………………
如果有错误或者更好的意见请分享和指正!
<!--EndFragment-->