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/

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<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>

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!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

posted @   ®Geovin Du Dream Park™  阅读(739)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
历史上的今天：
2018-01-22 Python3.4:splinter or traceback
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示