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. Ajax实现带进度条的文件上传

    Ajax实现带进度条的文件上传 文件上传页面运行效果 上传文件并显示进度条运行效果 代码如下; DiskFileItemFactory factory = new DiskFileItemFactor ...

  2. React Native搭建开发环境 之 --走过的坑

    React Native是使用JavaScript和React编写原生移动应用 我的开发平台是基于windows系统,所以只支持android,要是想开发ios系统,那就只能考虑使用沙盒环境 接下来就 ...

  3. 3-1.Hadoop单机模式安装

    Hadoop单机模式安装 一.实验介绍 1.1 实验内容 hadoop三种安装模式介绍 hadoop单机模式安装 测试安装 1.2 实验知识点 下载解压/环境变量配置 Linux/shell 测试Wo ...

  4. LeetCode编程训练 - 位运算(Bit Manipulation)

    位运算基础 说到与(&).或(|).非(~).异或(^).位移等位运算,就得说到位运算的各种奇淫巧技,下面分运算符说明. 1. 与(&) 计算式 a&b,a.b各位中同为 1 ...

  5. 急急如律令！火速搭建一个C#即时通信系统！（附源码分享——高度可移植！）

    (2016年3月更:由于后来了解到GGTalk开源即时通讯系统,因此直接采用了该资源用于项目开发,在此对作者表示由衷的感谢!) —————————————————————————————————— 人 ...

  6. [Swift]LeetCode328. 奇偶链表 | Odd Even Linked List

    Given a singly linked list, group all odd nodes together followed by the even nodes. Please note her ...

  7. [Swift]LeetCode437. 路径总和 III | Path Sum III

    You are given a binary tree in which each node contains an integer value. Find the number of paths t ...

  8. Android studio使用过程中错误的解决方法

    错误一:No such property: POM_DESCRIPTION for class: org.gradle.api.publication.maven.internal.pom 刚开始出现 ...

  9. python-函数参数

    1.Python的函数定义非常简单,但灵活度却非常大.除了正常定义的必选参数外,还可以使用默认参数.可变参数和关键字参数,使得函数定义出来的接口,不但能处理复杂的参数,还可以简化调用者的代码 1).位 ...

  10. http初探

    http超文本传输协议 一.版本差异: 版本分0.9   1.0   1.1    2.0 http0.9/1.0已经过时:目前主要是1.1版本的,2.0版本的还没普及. http1.1 ----在同 ...