zoukankan      html  css  js  c++  java
  • vis.js 4.21.0 Timeline localization

    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

  • 相关阅读:
    RFID亮灯电子标签在仓储管理中的应用
    漫画:寻找股票买入卖出的最佳时机(动态规划)
    JAVA深入解析-36个话题-Two
    一行代码让训练速度提升2倍,飞桨自动混合精度技术详解
    追源码的平凡之路
    看完这篇,你也是字符编码大神!
    微服务的熔断原理与实现
    经典论文复现 | PyraNet:基于特征金字塔网络的人体姿态估计
    一文看懂人机对话
    「Spring Boot 2.4 新特性」一键构建Docker镜像
  • 原文地址:https://www.cnblogs.com/geovindu/p/10304951.html
Copyright © 2011-2022 走看看