使用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