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