Chronoline.js
依赖其他库 jQuery qTip2 Raphael
使用它的时候,大概需要这样的配置
var timeline = new Chronoline($("#timeline")[0], events, {
animated: true,
defaultStartDate: new Date(1589, 0, 1),
draggable: true,
hashInterval: function(date) {
return date.getDate() === 1;
},
labelInterval: function(date) {
return date.getMonth() === 0 && date.getDate() === 1;
},
labelFormat: "%Y",
markToday: true,
scrollLeft: function(date) {
return new Date(date.getFullYear() - 1, date.getMonth(), date.getDate());
},
scrollRight: function(date) {
return new Date(date.getFullYear() + 1, date.getMonth(), date.getDate());
},
subLabel: null,
subSubLabel: null,
timelinePadding: DAY_IN_MILLISECONDS * 366 / 4,
tooltips: true,
visibleSpan: DAY_IN_MILLISECONDS * 366 * 5
});
配置项的这些参数描述了我们使用这个时间轴时,它的显示外观,包扩显示的具体时间格式,刻度的显示,刻度标签的格式,时间轴的时间跨度,滚动一次的时间跨度,可以说配置说明书要看的非常多了,可以试下修改配置项,你会惊呆的,简直不要太强大。
叮叮叮...附上github源码
学习可视化案例,认识可视化库,小白不断更新中