欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vis.js 4.21.0 Timeline localization

程序员文章站 2023-02-20 22:37:41
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>