代码之家 › 专栏 › 技术社区 › Francesco G.

Vis.js时间线动态更改

vis.js jquery javascript

Francesco G. · 技术社区 · 6 年前

我想动态更改时间线选项。当文档准备就绪时,我可以初始化一个或多个时间线,对于每个时间线,我希望有可能更改选项、数据或组。

$(document).ready(function(){
          var items = new vis.DataSet([
            {id: 1, group: 1, content: 'item 1', start: '2013-04-17', end: '2013-04-18'},
            {id: 2, group: 2, content: 'item 2', start: '2013-04-14', end: '2013-04-15'},
            {id: 3, group: 3, content: 'item 3', start: '2013-04-16', end: '2013-04-17'},
            {id: 4, group: 3, content: 'item 4', start: '2013-04-15', end: '2013-04-16'},
            {id: 5, group: 1, content: 'item 5', start: '2013-04-18', end: '2013-04-19'},
            {id: 6, group: 1, content: 'item 6', start: '2013-04-19', end: '2013-04-20'}
          ]);
          
          var groups = new vis.DataSet([
            {id: 1, content: 'aaa'},
            {id: 2, content: 'bbb'},
            {id: 3, content: 'ccc'},
          ]);
          var options = {
            min: new Date(2013, 03, 01),
            max: new Date(2013, 03, 30),
            start: new Date(2013, 04, 01),
            end: new Date(2013, 04, 30),
            zoomMin: 1000*60,
            zoomMax: 1000*60*60*24*30, 
            stack: false,
            margin: {
              item: 20, // minimal margin between items
              axis: 10   // minimal margin between items and the axis
            },
          };
          var container = document.getElementById('mytimeline1');
          new vis.Timeline(container, items, groups, options);
          
          var items2 = new vis.DataSet([
            {id: 4, group: 3, content: 'item 7', start: '2013-04-15', end: '2013-04-16'},
            {id: 5, group: 1, content: 'item 8', start: '2013-04-18', end: '2013-04-19'},
            {id: 6, group: 1, content: 'item 9', start: '2013-04-19', end: '2013-04-20'}
          ]);
          
          var groups2 = new vis.DataSet([
            {id: 1, content: 'ddd'},
            {id: 2, content: 'eee'},
            {id: 3, content: 'fff'},
          ]);

          var container2 = document.getElementById('mytimeline2');
          new vis.Timeline(container2, items2, groups2, options);
});


  // I don't want to initialize global vars (it's simple) because I can have 1, 2 or n timeline...
  
$(document).on("click", ".setTL1", function(){
  alert("I want to change mytimeline1 settings by .setOptions()");
  // I would like to have a sintax like: 
  // var container = document.getElementById('mytimeline1');
  // container.xxxx.setOptions({
  //		...
  // });
  // is it possible?
});
$(document).on("click", ".setTL2", function(){
  alert("I want to change mytimeline2 settings by .setOptions()");
  // I would like to have a sintax like: 
  // var container = document.getElementById('mytimeline2');
  // container.xxxx.setOptions({
  //		...
  // });
  // is it possible?
});

    #mytimeline1, #mytimeline2 {
      border:1px solid gray;
      padding : 5px;
    }
    .vis.timeline .labelset .vlabel .inner {
      min-height: 100px;
    }

<!DOCTYPE html>
<html>
<head>
  <title>Fixed group height</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet"/>
</head>

<body>
  <button class="setTL1">Zoom1 (ClickMe)</button>
  <div id="mytimeline1"></div>
  <div style="height:10px;"></div>
  <button class="setTL2">Zoom2 (ClickMe)</button>
  <div id="mytimeline2"></div>

</body>

你有什么建议吗?

1 回复 | 直到 6 年前

GriffoGoes 6 年前

TLDR:没有全局变量(或一些js框架)是不行的,但是您可以定义一个全局映射(关联数组,js对象),以避免为每个所需的时间线都有一个新的全局变量。

想一想,在一个简单的方法中,我建议拥有一个初始化时间线的全局映射,映射键可以是div id。为了更容易维护,我还建议使用一个标准函数来创建/初始化时间线(并最终更改它们)。下面是一些未经测试的代码模型:

var globalTimelines = {}; // yes, this is global.. :(
function createTimeline(containerId, rawItems,rawGroups, options) {
      var items = new vis.DataSet(rawItems);
      var groupss = new vis.DataSet(rawGroups);
      var container = document.getElementById(containerId);
      var newTimeline = new vis.Timeline(container, items, groups, options);
      globalTimelines[containerId] = newTimeline;
} 

$(document).ready(function(){
      createTimeline("mytimeline1", ....);
      createTimeline("mytimeline2", ....);
});
$(document).on("click", ".setTL1", function(){
  alert("I want to change mytimeline1 settings by .setOptions()");
  var timeline = globalTimelines['mytimeline1'];
  timeline.setOptions({
        ...
  });
});