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

vis.js 4.21.0 Timeline localization的更多相关文章

  1. 动态可视化库Vis.js：社交关系谱

    Form Here:http://code.csdn.net/news/2819345 Vis.js 是一个动态的.基于浏览器的可视化库,可处理大量的动态数据并能与这些数据进行交互操作.该项目是由Al ...

  2. Vis.js – 基于浏览器的动态 JavaScript 可视化库

    Vis.js 是一个动态的,基于浏览器的可视化库.该库被设计为易于使用,能处理大量的动态数据.该库由以下几部分组成:一是数据集和数据视图,基于灵活的键/值数据集,可以添加,更新和删除项目,订阅数据集变 ...

  3. 日常英语---四、vis.js是什么

    日常英语---四.vis.js是什么 一.总结 一句话总结:A dynamic, browser based visualization library. 动态基于浏览器的可视库 http://vis ...

  4. vis.js绘图库的一个BUG以及源码修正

    1. BUG 1.1 BUG触发情况 在使用vis.js绘图时,加入两个节点A和B之间既存在一条从A指向B的边,同时也存在一条从B指向A的边,那么这个绘图库就会崩溃. 1.2 BUG解析 vis.js ...

  5. HiShop2.x版本中的上传插件分析，得出所用的模板语言为Underscore.js 1.6.0且自己已修改

    效果: 上传组件非常的酷,但是分析其使用JS写法使用了模板语言的,代码如下: <script type="text/j-template" id="tpl_popb ...

  6. node.js 在 Express4.0 框架使用 Connect-Busboy 实现文件上传

    node.js下四种post提交数据的方式 今天说分享的是其中一种,就是上传文件. Express 4.0 以后,将功能原子化,高内聚,低耦合,独立出了很多中间件 今天主要分享文件上传 对于conne ...

  7. jquery-2.0.3.js和jquery-2.0.3.min.js的区别

    两个文件的作用是完全一样的. jquery-2.0.3.js里的代码是没有进行处理的原代码,适合于人们阅读与研究. jquery-2.0.3.min.js里的代码进行过特殊的处理, 如变量的名称基本都 ...

  8. Vis.js图表插件

    Vis.js是一款基于JavaScript的可视化图表库,Vis.js不像其他的图表库那样仅仅支持几种常用的数据图表,比如线形图.柱状图.饼图等,Vis.js支持上百种不同类型的可视化图表类型,比如时 ...

  9. AeroGear.js 1.2.0 发布，手机Web应用脚手架 - 开源中国社区

    AeroGear.js 1.2.0 发布,手机Web应用脚手架 - 开源中国社区 AeroGear.js 1.2.0 发布,手机Web应用脚手架

随机推荐

  1. Python-常用字符串操作

    name = 'shanbaoliang.exe' print(name.capitalize()) #将字符串首字母大写 print(name.center(50,'-')) #把字符串居中,并用特 ...

  2. nova vnc proxy基本原理

    先上图 VNC Proxy的功能: 将公网(public network)和私网(private network)隔离 VNC client运行在公网上,VNCServer运行在私网上,VNC Pro ...

  3. 高级Java面试总结1

    一.三大框架方面问题   1.Spring 事务的隔离性,并说说每个隔离性的区别 解答:Spring事务详解 2.Spring事务的传播行为,并说说每个传播行为的区别 解答:Spring事务详解 3. ...

  4. [Swift]LeetCode59. 螺旋矩阵 II | Spiral Matrix II

    Given a positive integer n, generate a square matrix filled with elements from 1 to n2 in spiral ord ...

  5. [Swift]LeetCode442. 数组中重复的数据 | Find All Duplicates in an Array

    Given an array of integers, 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and others ...

  6. [Swift]LeetCode639. 解码方法 2 | Decode Ways II

    A message containing letters from A-Z is being encoded to numbers using the following mapping way: ' ...

  7. ASP.Net Core项目在Mac上使用Entity Framework Core 2.0进行迁移可能会遇到的一个问题.

    在ASP.Net Core 2.0的项目里, 我使用Entity Framework Core 2.0 作为ORM. 有人习惯把数据库的连接字符串写在appSettings.json里面, 有的习惯写 ...

  8. windows之桌面程序引导功能

    经常使用windows系统的同学可能都会遇到这样一种情况,刚按照完的应用程序,可能会在桌面产生一个提示信息,指示当前快捷方式可以使用了,并给出相应的文字说明,指示该快捷方式的功能.那么大家有没有考虑过 ...

  9. oauth2.0通过JdbcClientDetailsService从数据库读取相应的配置

    oauth2.0通过JdbcClientDetailsService从数据库读取相应的配置 在上一节我们讲述的配置是把授权码存储在redis中,把相应的请求的路径用使用in-memory存储 ,这个是 ...

  10. mybatis中resultMap配置细则

    resultMap算是mybatis映射器中最复杂的一个节点了,能够配置的属性较多,我们在mybatis映射器配置细则这篇博客中已经简单介绍过resultMap的配置了,当时我们介绍了resultMa ...