simile timeline 引见与使用 _Web前端

simile timeline 介绍与使用

timeline 组件可以很形象的将发生的事件排列在一起，便于比较，中文例子较少，本文举例说明一下 timeline 的使用以及定制：

演示@google code

1.band 的概念

每个band表示对时间的一种粒度描述，可以设置以一天，一月，一年的粒度来展现这一时间段内的事件：

band 可以指定其占整体组件的高度百分比，时间单位之间的像素值等。

注意点在于 band 间的同步需要手动指定，当以天为单位进行浏览时，其他的月和年即使变化缓慢也要随之变化。

2.event 与 eventSource 的概念

event 根据官方文档分为 2 大类：

1.即时事件，duration 配置为 false，表示为突发事件，该事件并没有占据时间区间，例如人物的出生死亡日期，等，该事件使用原点描述。

2.延续事件，事件具有一定的起始日期，而对于开始和结束日期又考虑是否是确定时间而加入了latestStart 与? earliestEnd的配置，用来表示不精确的开始与结束时间。

eventSource 就是对事件集合的包装，提供了通过静态数据或ajax获取事件信息。

3.bubble 的概念

当点击事件名时，会弹出气泡显示该事件的详细介绍，该内容从事件的description 配置中读取显示。

4. 过滤与高亮

可在每个band中设置过滤与高亮函数，根据传入特定事件作为参数调用得到返回值来确定该事件是否通过筛选，高亮。

timeline.getBand(0).getEventPainter().setFilterMatcher(filterMatcherFn);
timeline.getBand(0).getEventPainter().setHighlightMatcher(highlightMatcherFn);

5.标准使用流程

创建eventsource -> 创建 band info - > 创建 timeline 组件 -> eventSource 载入事件 -> timeline 刷新 UI

6.定制

?4.1 event 条的颜色设置

在 event 信息中有 classname 配置项，当设置的话会再 event 条上设置 class ：tape-classname,.small-classname ，可在css中指定对应类的背景色，即可实现event的不同颜色显示。

?4.2 bubble 的宽度设置

bubble宽度可通过设置主题theme的方式解决，新增一个主题，对这个主题设置气泡的宽度，并将这个主题应用到band即可：

theme = Timeline.ClassicTheme.create();
    theme.event.bubble.width = 450;
    var base=new Date(2010,1,1);
    var bandInfos = [
    Timeline.createBandInfo({
        eventSource: eventSource,
        date:base,
        width: "70%",
        theme: theme,
        intervalUnit: Timeline.DateTime.DAY,
        intervalPixels: 100
    })

? 4.3 ? bubble 时间尾注去除

bubble末尾的时间尾注没有作用可通过对css类 timeline-event-bubble-time 进行隐藏操作而去除。

PS: 定制 css 的引入方法

为了便于使用，可将css定义同js写在一起，在页面载入时动态生成内联css加入页面

if (!document.getElementById("timeline_style")) {
        //跨浏览器动态添加css    		
        var node = document.createElement("style");
        node.type = 'text/css';
        node.setAttribute("id", "timeline_style");
        var styleStr = ".tape-alarm-task,.small-alarm-task {" +
?"background:red;" + "	}\n" + 
".tape-plan-task,.small-plan-task {" + 
"background:green;" + "	}\n" + 
".timeline-event-bubble-time {" + "	display:none;" + "}\n";
        var head = document.getElementsByTagName("head")[0];
        if (node.styleSheet) {
            node.styleSheet.cssText = styleStr;
        } else {
            node.appendChild(document.createTextNode(styleStr));
        }
        head.appendChild(node);
    }