我要评论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>
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论