分享一个基于事件时间线的Javascript类库-Chronoline

在线演示  本地下载

Chronoline.js是一个javascript的类库用来帮助开发者创建一个按时间来展示的时间线。

整个时间线水平方向显示，我们可以方便的显示任何时间长度的事件，并且提供一个tooltip来展示事件详细内容。

主要特性

需要类库：

• raphael.js: 2.1.0
• jQuery: 1.7.2
• qTip2: 04/24/12 nightly

支持浏览器：

• Internet Explorer 8+ (except the tooltips)
• Firefox 12+
• Chrome 18+

整个类库支持拖放，支持屏幕横向滚动。

如何使用

倒入类库：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="chronoline/jquery.qtip.min.css" />
<script type="text/javascript" src="chronoline/jquery.qtip.min.js"></script>
<script type="text/javascript" src="chronoline/raphael-min.js"></script>
<link rel="stylesheet" type="text/css" href="chronoline/chronoline.css" />
<script type="text/javascript" src="chronoline/chronoline.js"></script>

实例一个时间线：

var timeline1 = new Chronoline(document.getElementById("target1"), events,
{animated: true,
 tooltips: true,
 defaultStartDate: new Date(2012, 3, 5),
 sections: sections,
 sectionLabelAttrs: {'fill': '#997e3d', 'font-weight': 'bold'},
});

如果你需要使用时间轴方式来展示你的事件，Chronoline.js是一个不错的选择！