from:http://visjs.org/timeline_examples.html https://github.com/almende/vis https://github.com/moment/moment/ https://momentjs.com/ ...
from:http://visjs.org/timeline_examples.html
https://github.com/almende/vis
https://github.com/moment/moment/
https://momentjs.com/
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="utf-8">
<title>Timeline | Horizontal Scroll Option</title>
<script src="moment/2.8.1/moment-with-locales.min.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Timeline horizontal scroll option</h1>
<div id="mytimeline"></div>
<script>
// create groups
var numberOfGroups = 25;
var groups = new vis.DataSet()
for (var i = 0; i < numberOfGroups; i++) {
groups.add({
id: i,
content: 'Truck ' + i
})
}
// create items
var numberOfItems = 1000;
var items = new vis.DataSet();
var itemsPerGroup = Math.round(numberOfItems/numberOfGroups);
for (var truck = 0; truck < numberOfGroups; truck++) {
var date = new Date();
for (var order = 0; order < itemsPerGroup; order++) {
date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
var start = new Date(date);
date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
var end = new Date(date);
items.add({
id: order + itemsPerGroup * truck,
group: truck,
start: start,
end: end,
content: 'Order ' + order
});
}
}
// specify options
var options = {
stack: true,
locale:'zh-cn',
horizontalScroll: true,
zoomKey: 'ctrlKey',
maxHeight: 400,
start: new Date(),
end: new Date(1000*60*60*24 + (new Date()).valueOf()),
editable: true,
margin: {
item: 10, // minimal margin between items
axis: 5 // minimal margin between items and the axis
},
orientation: 'top'
};
// create a Timeline
var container = document.getElementById('mytimeline');
timeline = new vis.Timeline(container, items, groups, options);
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="utf-8">
<title>Timeline | Localization</title>
<style type="text/css">
body, html, select {
font-family: sans-serif;
font-size: 11pt;
}
</style>
<script src="moment/2.8.1/moment-with-locales.min.js"></script>
<!--https://momentjs.com/
https://github.com/moment/moment/
<script src="moment-with-locales.min.js"></script>-->
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
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>.
</p>
<p>
<label for="locale">Select a locale:</label>
<select id="locale">
<option value="en" >en</option>
<option value="it">it</option>
<option value="nl">nl</option>
<option value="de">de</option>
<option value="zh-cn">zh-cn</option>
<option value="zh-cn">zh-hk</option>
<option value="zh-cn">zh-tw</option>
<option value="ar">Arabic</option>
<option value="fr">French</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
<option value="ru">Russian</option>
<option value="es">Spanish</option>
</select>
</p>
<div id="visualization"></div>
<script type="text/javascript">
var DAY = 24 * 60 * 60 * 1000;
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: new Date(new Date().valueOf() - DAY)},
{id: 2, content: 'item 2', start: new Date(new Date().valueOf() + 2 * DAY)}
]);
// Configuration for the Timeline
var options = {
locale: 'zh-cn',
showCurrentTime: true
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
timeline.addCustomTime(new Date());
timeline.setCustomTime(new Date(new Date().valueOf() + DAY));
// update the locale when changing the select box value
var select = document.getElementById('locale');
select.onchange = function () {
timeline.setOptions({
locale: this.value
});
};
select.onchange();
</script>
</body>
</html>
win7 IE 11
https://support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads#!%2Fzh-cn%2Fhelp%2F17621%2Finternet-explorer-downloads
https://www.microsoft.com/zh-cn/download/internet-explorer-11-for-windows-7-details.aspx
