1. Timeline实例:
如图,已时间轴的形式展示数据,详细数据在点击时间轴上的点时已弹出层的形式展示。
优点:
l 可以已时间为基准展示数据,一目了然
l 在页面中Js只需要引入一个js文件即可
l 支持多种格式数据,如json和xml格式的数据
缺点:
l Js在js中引入的文件较多,使页面加载吃力
l 跟jquery有冲突
l 没有详细的帮助文档
2. 使用该timeline一些经验和教训:
1. 如果你在项目中不想引入大量的jsapi文件夹,在页面中只需要这样引入js。
<scriptsrc="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true"type="text/javascript"></script>
无需再引入其他,注意标红的位置。如果你担心网站随时关闭,建议导入api文件夹包,api包在该文件统一目录,然后引入js写法为
<scriptsrc="你的文件夹所在地址/api/timeline-api.js?bundle=true"type="text/javascript"></script>
2. 一些属性说明:
l 方法loadTimeline()用于获取数据,组织数据,由于这边是跟业务有关,所以并不不是直接获取的json数据,而是通过该方法重新组装的json数据,然后调用时间轴展示方法timeline3()
l timeline3()展示方法是设置时间轴属性,由于没有详细的说明文档,所以一些属性还没有详细的介绍,只是根据例子介绍一个属性是做什么用的。
l bandInfos属性:设置层,如图中有上中下三个层,责bandInfos实例化了三个createBandInfo。
l intervalUnit属性:间隔属性,主要有YEAR,MONTH,WEEK,DAY,HOUR等间隔,此例子中只用到了MONTH,DAY,HOUR一次对应bandInfos中的下中上三层。
l createBandInfo.syncWith 和 createBandInfo.highlight;这两个属性一定要记得设置,否则无法实现上中下三层的联动效果.如代码中的
bandInfos[1].syncWith=0,bandInfos[1]. Highlight=true
l eventSource1.loadJSON(timeline_data,url); 获取json数据
3. 示例代码:
function loadTimeline() {
$.post(basePath+"weibo!ajaxSendWeiboList.action",{weibo_status:""},function(data){
var timeline_data = new Object();
var events=[];
$.each(data,function(){
var ob=new Object();
ob["start"]=this.startTime;
ob["title"]=this.actContent.substring(0,10)+"...";
ob["description"]=replaceeStrToeImg(this.actContent);
if(this.status==0)
ob["color"]='gray';
elseif(this.status==1)
ob["color"]='blue';
elseif(this.status==-1){
ob["color"]='red';
}
ob["image"]=imageUrl+this.image_name;
events.push(ob);
});
timeline_data["events"]=events;
timeline_data["dateTimeFormat"]='iso8601',
timeline3(timeline_data);
});
}
//时间轴控件
function timeline3(timeline_data){
var tl_el =document.getElementById("tl");
var eventSource = new Timeline.DefaultEventSource();
var eventSource1 = new Timeline.DefaultEventSource();
var theme1 =Timeline.ClassicTheme.create();
theme1.autoWidth = true;
theme1.timeline_start = new Date(Date.UTC(2012, 6,1,1,1,1));//开始时间
theme1.timeline_stop = new Date(Date.UTC(2013, 6,31,1,1,1));//结束时间
var d =Timeline.DateTime.parseGregorianDateTime(Date());//默认显示时间
var bandInfos = [
Timeline.createBandInfo({
width: "50%",
intervalUnit: Timeline.DateTime.HOUR,
intervalPixels:100,
eventSource: eventSource1,
date: d,
theme: theme1,
layout: 'original'
}),
Timeline.createBandInfo({
date: d,
width: "30%",
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 200,
showEventText: false,
trackHeight: 0.6,
trackGap: 0.2,
eventSource: eventSource1,
overview: true
}),
Timeline.createBandInfo({
date: d,
width: "20%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 200,
showEventText: false,
trackHeight: 0.5,
trackGap: 0.2,
eventSource: eventSource1,
overview: true
})
];
bandInfos[1].syncWith =0;
bandInfos[1].highlight= true;
bandInfos[2].syncWith =0;
bandInfos[2].highlight= true;
tl =Timeline.create(tl_el, bandInfos, Timeline.HORIZONTAL);
var url = '.';
eventSource1.loadJSON(timeline_data,url); //请求json格式数据
tl.layout();
}
4. 其他:
该文件的同一目录下还有一个官方提供的示例代码可以参考
官方地址:http://www.simile-widgets.org/
谷歌开源地址:http://code.google.com/p/simile-widgets/