Vis.js 时间轴动态变化

Question

我想动态更改时间轴选项。文档准备就绪后，我可以初始化 1 个或多个 TimeLine，并为每个 TimeLine 初始化，我希望有可能更改选项、数据或组。我不想初始化全局变量（调用它们很简单）因为我可以有 1、2 或 n 时间轴...

$(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>

你有推荐吗？

Answer 1

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

如果您没有使用任何 js 框架（ext.js、Angular 以及更多），您将不得不 handle/control javascripts [=18= 】你要维护。没有标准的 DOM -> javascript 对象映射。

从准系统的角度考虑，我建议使用初始化时间线的全局映射，映射键可以是 div id。为了让事情更容易维护，我还建议有一个标准函数来 create/initilize 时间线（并最终改变它们）。下面是一些未经测试的代码模型：

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({
        ...
  });
});

Vis.js 时间轴动态变化

Vis.js Timeline change dynamically

javascript

jquery

vis.js