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. Linux指令 压缩与解压

    打包: 格式:tar -cvf  压缩后的名称.tar   压缩的文件1 压缩的文件2 ```压缩的文件n(压缩多个文件为一份时各个文件以空格隔开) 例子:tar -cvf  tomcats.tar ...

  2. Java打包商用化软件

    这是我在博客中写的第一篇文章.还请各位大神们多多指教!我会详细讲解如何将我们由java的swing以及awt组件编写出的java可视化窗口程序编制成一个我们能够让用户使用的,商业化,可安装的软件.网上 ...

  3. SDL 开发实战（六）： 使用 SDL 实现 YUV 播放器

    前面铺垫了这么多,现在终于进入核心的主题了,那就是使用SDL播放视频,本节我们将使用SDL播放YUV视频,也就是做一个YUV播放器. 下面说明一下使用SDL播放YUV视频的基本流程,主要分为两大部分: ...

  4. [Swift]LeetCode69. x 的平方根 | Sqrt(x)

    Implement int sqrt(int x). Compute and return the square root of x, where x is guaranteed to be a no ...

  5. [Swift]LeetCode154. 寻找旋转排序数组中的最小值 II | Find Minimum in Rotated Sorted Array II

    Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. (i.e. ...

  6. [Swift]LeetCode255.验证二叉搜索树的先序序列 $ Verify Preorder Sequence in Binary Search Tree

    Given an array of numbers, verify whether it is the correct preorder traversal sequence of a binary ...

  7. [Swift]LeetCode942. 增减字符串匹配 | DI String Match

    Given a string S that only contains "I" (increase) or "D" (decrease), let N = S. ...

  8. Docker 搭建pxc集群 + haproxy + keepalived 高可用（二）

    上一节我们有了两个分片的pxc集群,这一节我们接着安装haproxy和keepalived的实现集群的高可用 一.先下载haproxy的镜像 [root@localhost ~]# docker pu ...

  9. Mysql数据库和表的增删改查以及数据备份&恢复

    数据库 查看所有数据库 show databases; 使用数据库 use 数据库名; 查看当前使用的数据库 select database(); 创建数据库 create database 数据库名 ...

  10. LeetCode算法题-Image Smoother（Java实现）

    这是悦乐书的第282次更新,第299篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第150题(顺位题号是661).给定表示图像灰度的2D整数矩阵M,您需要设计一个平滑器以 ...