Chronoline.js
依賴其他庫 jQuery qTip2 Raphael
使用它的時(shí)候氓涣,大概需要這樣的配置
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
});
配置項(xiàng)的這些參數(shù)描述了我們使用這個(gè)時(shí)間軸時(shí)鸠补,它的顯示外觀膘滨,包擴(kuò)顯示的具體時(shí)間格式耀鸦,刻度的顯示寝衫,刻度標(biāo)簽的格式顷扩,時(shí)間軸的時(shí)間跨度,滾動一次的時(shí)間跨度慰毅,可以說配置說明書要看的非常多了隘截,可以試下修改配置項(xiàng),你會驚呆的汹胃,簡直不要太強(qiáng)大婶芭。
image.png
叮叮叮...附上github源碼
學(xué)習(xí)可視化案例,認(rèn)識可視化庫着饥,小白不斷更新中