vis.js 4.21.0 Timeline localization

Wesley13
• 阅读 712

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

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
Java获得今日零时零分零秒的时间(Date型)
publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
ES6 新增的数组的方法
给定一个数组letlist\//wu:武力zhi:智力{id:1,name:'张飞',wu:97,zhi:10},{id:2,name:'诸葛亮',wu:55,zhi:99},{id:3,name:'赵云',wu:97,zhi:66},{id:4,na
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这