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. CentOS6 安装 ＭySQL5.7

    CentOS 6.10 编译安装 Mysql 5.7.23 X64 1.添加用户组和用户 1) 添加用户组和用户 groupadd mysql 2) 添加用户 useradd -g mysql -s ...

  2. android 2018 面试题

    四大组件:activity.service.content provider.broadcast receiver [一]Activity 1.生命周期 onCreate:表示activity正在被创 ...

  3. input type=passoord 密码框的明密文(显示和隐藏) 显示

    最近在写一个新的项目,从头开始写,所以就要从注册登录开始做起.以前写登录注册模块的时候,无外乎给input框一个type=”password”就可以了,近期因为要涉及到显示隐藏状态的切换. 样式代码如 ...

  4. #研发解决方案#研发协作平台CloudEngine

    Cloud Engine:大杀器如何炼成 郑昀(微博:http://weibo.com/yunzheng) 创建于2016/6/18 最后更新于2016/6/19 点击查看我的<如何从零搭建一个 ...

  5. Go变量逃逸分析

    目录 什么是逃逸分析 为什么要逃逸分析 逃逸分析是怎么完成的 逃逸分析实例 总结 写过C/C++的同学都知道,调用著名的malloc和new函数可以在堆上分配一块内存,这块内存的使用和销毁的责任都在程 ...

  6. [Swift]LeetCode537. 复数乘法 | Complex Number Multiplication

    Given two strings representing two complex numbers. You need to return a string representing their m ...

  7. python之Django学习笔记（一）---搭建Django开发环境和一些基本命令

    1.Django下载 官方下载地址:https://www.djangoproject.com/download/ 2.Django安装 linux/windows安装方法相同,具体有以下俩种 pip ...

  8. Guava 源码分析（Cache 原理 对象引用、事件回调）

    前言 在上文「Guava 源码分析(Cache 原理)」中分析了 Guava Cache 的相关原理. 文末提到了回收机制.移除时间通知等内容,许多朋友也挺感兴趣,这次就这两个内容再来分析分析. 在开 ...

  9. C# 之 Socket 简单入门示例

    这个例子只是简单实现了如何使用 Socket 类实现面向连接的通信. 注意:此例子的目的只是为了说明用套接字写程序的大概思路,而不是实际项目中的使用程序.在这个例子中,实际上还有很多问题没有解决,如消 ...

  10. 【朝花夕拾】Android性能篇之（一）序言及JVM

    序言        笔者从事Anroid开发有些年头了,深知掌握Anroid性能优化方面的知识的必要性,这是一个程序员必须修炼的内功.在面试中,它是面试官的挚爱,在工作中,它是代码质量的拦路虎,其重要 ...