谷歌开源项目timeline一些经验

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/