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. 前端基础之BOM和DOM

    关于网页交互:BOM和DOM javaScript分为ECMAScript,DOM,BOM . BOM(Browser  object  Model)是指浏览器对象模型,它使JavaScript有能力 ...

  2. 深入解析ConcurrentHashMap类

    以前写过介绍HashMap的文章,文中提到过HashMap在put的时候,插入的元素超过了容量(由负载因子决定)的范围就会触发扩容操作,就是rehash,这个会重新将原数组的内容重新hash到新的扩容 ...

  3. Spring Boot 实现 RabbitMQ 延迟消费和延迟重试队列

    本文主要摘录自:详细介绍Spring Boot + RabbitMQ实现延迟队列 并增加了自己的一些理解,记录下来,以便日后查阅. 项目源码: spring-boot-rabbitmq-delay-q ...

  4. centos7启动流程（从加电开始）

    图片来自于https://blog.csdn.net/qq_27754983/article/details/75212666 1. UEFI或BIOS启动 服务器加电后,CPU 自动重置成初始状态, ...

  5. Java中构造方法、实例方法、类方法的区别

    1. 构造方法 构造方法负责对象的初始化工作,为实例变量赋予合适的初始值.必须满足以下的语法规则: 方法名与类名相同: 不要返回类型(例如return.void等): 不能被static.final. ...

  6. 为什么公司宁愿 25K 重新招人，也不给你加到 20K？原因太现实……

    年底了,还有几天就要过年了,年后必定又是一波跳槽季,我们为什么要跳槽,为什么公司不能满足我们加薪的需求? 说到这个话题,想必从事码农的各位都清楚的一个道理:工资都是跳出来的,其他行业我不太清楚,但在 ...

  7. Jason Wang: 结对编程 CountWord(第三次作业)

    本次作业地址: https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/homework/2882 学号: 201731072323 ...

  8. qt之图像处理

    毕业2年了,一直使用的qt做桌面程序,很少接触图像算法类的东西,最近由于项目的原因,不得不了解下图像处理,不过也是一些简单的图像处理,仅此作为记录,并希望能帮助初学qt图像处理的朋友. 首先我推荐一篇 ...

  9. 『最短Hamilton路径 状态压缩DP』

    状压DP入门 最短Hamilton路径 Description 给定一张 n(n≤20) 个点的带权无向图,点从 0~n-1 标号,求起点 0 到终点 n-1 的最短Hamilton路径. Hamil ...

  10. 设计模式的征途（C#实现）—文章目录索引

    1.预备篇 UML类图10分钟快速入门 2.创建型模式 ① 设计模式的征途-01.单例(Singleton)模式 ② 设计模式的征途-02.简单工厂(Simple Factory)模式 ③ 设计模式的 ...