基于时间的可视化
使用chronoline.js构建时间轴
页面构建及库的引入
1 |
|
数据组织
原始数据
1
2
3
4
5var plays = [
{ "play": "The Two Gentlemen of Verona", "date": "1589-1591", "record": "Francis......plays" },
// data set continues....
{ "play": "The Two Noble Kinsmen", "date": "1613", "record": "entered......with John Fletcher." }
];数据转换:将
plays[i].date
转换为表示时间范围的数组1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17var events = $.map(plays, function(play) {
let event = {};
event.title = play.play;
if (play.date.indexOf('-') !== -1) {
let dateRange = play.date.split('-');
event.dates = [
new Date(dateRange[0], 0, 1),
new Date(dateRange[1], 11, 31)
];
} else {
event.dates = [
new Date(play.date, 0, 1),
new Date(play.date, 11, 31)
];
}
return event;
});
选项设置
图标绘制
1
2
3$(function() {
let timeline = new Chronoline($('#timeline').get(0), events, {});
});选项设置
赋予指定的开始时间
1
defaultStartDate: new Date(1589, 0, 1)
禁止当前日期标记
1
markToday: false
设置最小刻度和标签
1
2
3
4
5
6hashInterval: function(date) {
return date.getDate() === 1;
},
labelInterval: function(date) {
return date.getMonth() === 0 && date.getDate() === 1;
}在每处标记只显示年份
1
labelFormat: "%Y"
删除默认标签设置
1
2subLabel: null,
subSubLabel: null改变时间轴上的时间间隔
1
visibleSpan: DAY_IN_MILLISECONDS * 366 * 10
时间轴按年滚动
1
2
3
4
5
6scrollLeft: 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());
}添加空隙
1
timelinePadding: DAY_IN_MILLISECONDS * 366 / 4
拖动时间轴
1
2
3animated: true,
draggable: true,
tooltips: true改变时间轴外观
1
2
3
4
5
6eventAttrs: {
fill: '#ffa44f',
stroke: '#ffa44f',
'stroke-width': 2
},
eventHeight: 10
结果展示
使用JavaScript构建时间轴
页面结构
1 | <body> |
使用JavaScript生成内容
使用ol构建时间轴
1 | var container = document.getElementById('timeline'), |
为每个元素添加时间信息
1 | plays.forEach(function(play) { |
使用语义化标签添加内容
1 | plays.forEach(function(play) { |
添加交互
1 | var clicked = function(ev) { |
修改样式
1 | body { |
结果展示
使用TimelineJS组件
页面结构
1 | <body> |
数据组织
1 | var plays = [ |
创建时间轴
1 | var timelineConfig = { |