使用chronoline.js构建时间轴

页面构建及库的引入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/jquery.qtip.css">
<link rel="stylesheet" type="text/css" href="css/chronoline.css">
</head>

<body>

<div id="timeline"></div>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.qtip.js"></script>
<script src="js/raphael-min.js"></script>
<script src="js/chronoline.js"></script>

</body>
</html>

数据组织

  • 原始数据

    1
    2
    3
    4
    5
    var 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
    17
    var 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
      6
      hashInterval: function(date) {
      return date.getDate() === 1;
      },
      labelInterval: function(date) {
      return date.getMonth() === 0 && date.getDate() === 1;
      }
    • 在每处标记只显示年份

      1
      labelFormat: "%Y"
    • 删除默认标签设置

      1
      2
      subLabel: null,
      subSubLabel: null
    • 改变时间轴上的时间间隔

      1
      visibleSpan: DAY_IN_MILLISECONDS * 366 * 10
    • 时间轴按年滚动

      1
      2
      3
      4
      5
      6
      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());
      }
    • 添加空隙

      1
      timelinePadding: DAY_IN_MILLISECONDS * 366 / 4
    • 拖动时间轴

      1
      2
      3
      animated: true,
      draggable: true,
      tooltips: true
    • 改变时间轴外观

      1
      2
      3
      4
      5
      6
      eventAttrs: {
      fill: '#ffa44f',
      stroke: '#ffa44f',
      'stroke-width': 2
      },
      eventHeight: 10

结果展示

chronoline

使用JavaScript构建时间轴

页面结构

1
2
3
<body>
<div id="timeline"></div>
</body>

使用JavaScript生成内容

使用ol构建时间轴

1
2
3
4
5
var container = document.getElementById('timeline'),
list = document.createElement('ol');

list.className = 'timeline';
container.appendChild(list);

为每个元素添加时间信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
plays.forEach(function(play) {

let listItem = document.createElement('li');

if (play.date.indexOf('-') !== -1) {
let dates = play.date.split('-'),
time = document.createElement('time');
time.textContent = dates[0];
listItem.appendChild(time);
time = document.createElement('time');
time.textContent = dates[1];
listItem.appendChild(time);
} else {
let time = document.createElement('time');
time.textContent = play.date;
listItem.appendChild(time);
}

list.appendChild(listItem);
});

使用语义化标签添加内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
plays.forEach(function(play) {

let cite = document.createElement('cite');
cite.textContent = play.play;
listItem.appendChild(cite);

let describeList = document.createElement('dl');
describeTerms.forEach(function(term) {
if (play[term.key]) {
let describeTerm = document.createElement('dt');
describeTerm.textContent = term.label;
describeList.appendChild(describeTerm);

let describeElement = document.createElement('dd');
describeElement.textContent = play[term.key];
describeList.appendChild(describeElement);
}
});
listItem.appendChild(describeList);

});

添加交互

1
2
3
4
5
6
7
8
9
10
11
var clicked = function(ev) { 
if (ev.target.nodeName === 'CITE') {
let li = ev.target.parentNode;
if (li.className === 'expanded') {
li.className = '';
} else {
li.className = 'expanded';
}
}
};
document.getElementById('timeline').addEventListener('click', clicked);

修改样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
body {
padding: 2em;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
li {
list-style-type: none;
border-left: 2px solid black;
position: relative;
padding-left: 1em;
padding-bottom: 1em;
}
dl,li {
margin: 0;
}
li > time {
position: absolute;
left: -3.5em;
}
li > time + time {
top: 1em;
left: -3.85em;
}
li > time + time:before {
content: '-';
}
li > cite {
display: block;
cursor: pointer;
font-size: 1.5em;
line-height: 1em;
padding-bottom: 0.5em;
}
li > time:first-of-type:after {
content: '\00B7';
font-size: 8em;
position: absolute;
right: -0.3em;
top: -0.55em;
}
li dl {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 500ms ease-in-out;
-moz-transition: max-height 500ms ease-in-out;
-o-transition: max-height 500ms ease-in-out;
transition: max-height 500ms ease-in-out;
}
li.expanded dl {
max-height: 60em;
}

结果展示

timeline-2

使用TimelineJS组件

页面结构

1
2
3
4
5
<body>
<div id="timeline"></div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/timeline.js"></script>

数据组织

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
var plays = [
{
"record": "Francis Meres' Palladis Tamia (1598); referred to as \"Gentlemen of Verona\"",
"evidence": "The play ... plays",
"published": "First Folio (1623)",
"performance": "adaptation ... Shakespeare's day.",
"credit": "Michael Webb",
"media": "http://www.flickr.com/photos/52472983@N08/4846552714/",
"date": "1589-1591",
"genre": "Comedies",
"caption": "Rock Valley College Studio Theatre Complete Works Project February 1988",
"play": "The Two Gentlemen of Verona"
},
// data set continue...
]

var timelineData = {
headline: 'Chronology of Shakespeare\'s Plays',
type: 'default',
date: []
};

plays.forEach(function(play) {
var start = play.date;
var end = '';
if (play.date.indexOf('-') !== -1) {
var dates = play.date.split('-');
start = dates[0];
end = dates[1];
}

timelineData.date.push({
startDate: start,
endDate: end,
headline: play.play,
text: play.evidence,
tag: play.genre,
asset: {
media: play.media,
credit: play.credit,
caption: play.caption
}
});

});

创建时间轴

1
2
3
4
5
6
7
8
9
var timelineConfig = {
type: 'timeline',
width: '100%',
height: '600',
source: {timeline: timelineData},
embed_id: 'timeline'
};
timelinejs = new VMM.Timeline('timeline','100%','600px');
timelinejs.init(timelineConfig);

结果展示

timeline-3