timeline的使用和参数说明

关于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-->

时间层在IE中显示为方形箭头，该处的样式为了保持与其他浏览器样式一样，找到timeline/api/timeline-bundle.js的109行和337行（该文件未做修改的情况）

if (SimileAjax.Platform.browser.isIE) {

B.style.cursor = "move";

}

将上面的move改为pointer就是小手了，根据自己的需要做对应的修改。