from:http://visjs.org/timeline\_examples.html
https://github.com/almende/vis
https://github.com/moment/moment/
1<html> 2<head> 3<meta http-equiv="X-UA-Compatible" content="IE=edge"> 4<meta name="viewport" content="width=device-width,initial-scale=1"> 5<meta charset="utf-8"> 6 7 <title>Timeline | Horizontal Scroll Option</title> 8 <script src="moment/2.8.1/moment-with-locales.min.js"></script> 9 <script src="../../../dist/vis.js"></script> 10 <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> 11 12 13</head> 14 15<body> 16 17<h1>Timeline horizontal scroll option</h1> 18 19<div id="mytimeline"></div> 20 21<script> 22 23 // create groups 24 var numberOfGroups = 25; 25 var groups = new vis.DataSet() 26 for (var i = 0; i < numberOfGroups; i++) { 27 groups.add({ 28 id: i, 29 content: 'Truck ' + i 30 }) 31 } 32 33 // create items 34 var numberOfItems = 1000; 35 var items = new vis.DataSet(); 36 37 var itemsPerGroup = Math.round(numberOfItems/numberOfGroups); 38 39 for (var truck = 0; truck < numberOfGroups; truck++) { 40 var date = new Date(); 41 for (var order = 0; order < itemsPerGroup; order++) { 42 date.setHours(date.getHours() + 4 * (Math.random() < 0.2)); 43 var start = new Date(date); 44 45 date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4)); 46 var end = new Date(date); 47 48 items.add({ 49 id: order + itemsPerGroup * truck, 50 group: truck, 51 start: start, 52 end: end, 53 content: 'Order ' + order 54 }); 55 } 56 } 57 58 // specify options 59 var options = { 60 stack: true, 61 locale:'zh-cn', 62 horizontalScroll: true, 63 zoomKey: 'ctrlKey', 64 maxHeight: 400, 65 start: new Date(), 66 end: new Date(1000*60*60*24 + (new Date()).valueOf()), 67 editable: true, 68 margin: { 69 item: 10, // minimal margin between items 70 axis: 5 // minimal margin between items and the axis 71 }, 72 orientation: 'top' 73 }; 74 75 // create a Timeline 76 var container = document.getElementById('mytimeline'); 77 timeline = new vis.Timeline(container, items, groups, options); 78 79</script> 80 81</body> 82</html> 83 84<!DOCTYPE HTML> 85<html> 86<head> 87<meta http-equiv="X-UA-Compatible" content="IE=edge"> 88<meta name="viewport" content="width=device-width,initial-scale=1"> 89<meta charset="utf-8"> 90 <title>Timeline | Localization</title> 91 <style type="text/css"> 92 body, html, select { 93 font-family: sans-serif; 94 font-size: 11pt; 95 } 96 </style> 97 98 <script src="moment/2.8.1/moment-with-locales.min.js"></script> 99 <!--https://momentjs.com/ 100 https://github.com/moment/moment/ 101 <script src="moment-with-locales.min.js"></script>--> 102 103 <script src="../../../dist/vis.js"></script> 104 <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> 105 106 107</head> 108<body> 109<p> 110 To localize the Timeline, one has to load a version of moment.js including locales. To set a locale, specify option <code>{locale: STRING}</code>. 111</p> 112 113<p> 114 <label for="locale">Select a locale:</label> 115 <select id="locale"> 116 <option value="en" >en</option> 117 <option value="it">it</option> 118 <option value="nl">nl</option> 119 <option value="de">de</option> 120 <option value="zh-cn">zh-cn</option> 121 <option value="zh-cn">zh-hk</option> 122 <option value="zh-cn">zh-tw</option> 123 <option value="ar">Arabic</option> 124 <option value="fr">French</option> 125 <option value="ja">Japanese</option> 126 <option value="ko">Korean</option> 127 <option value="ru">Russian</option> 128 <option value="es">Spanish</option> 129 </select> 130</p> 131 132<div id="visualization"></div> 133<script type="text/javascript"> 134 var DAY = 24 * 60 * 60 * 1000; 135 136 // DOM element where the Timeline will be attached 137 var container = document.getElementById('visualization'); 138 139 // Create a DataSet (allows two way data-binding) 140 var items = new vis.DataSet([ 141 {id: 1, content: 'item 1', start: new Date(new Date().valueOf() - DAY)}, 142 {id: 2, content: 'item 2', start: new Date(new Date().valueOf() + 2 * DAY)} 143 ]); 144 145 // Configuration for the Timeline 146 var options = { 147 locale: 'zh-cn', 148 showCurrentTime: true 149 }; 150 151 // Create a Timeline 152 var timeline = new vis.Timeline(container, items, options); 153 timeline.addCustomTime(new Date()); 154 155 timeline.setCustomTime(new Date(new Date().valueOf() + DAY)); 156 157 // update the locale when changing the select box value 158 var select = document.getElementById('locale'); 159 select.onchange = function () { 160 timeline.setOptions({ 161 locale: this.value 162 }); 163 }; 164 select.onchange(); 165</script> 166</body> 167</html>
win7 IE 11
https://www.microsoft.com/zh-cn/download/internet-explorer-11-for-windows-7-details.aspx