Vis.js 时间轴动态变化答案

【问题标题】：Vis.js Timeline change dynamicallyVis.js 时间轴动态变化
【发布时间】：2019-03-06 16:23:32
【问题描述】：

我想动态更改时间线选项。文档准备好后，我可以初始化 1 个或多个 TimeLine 和 foreach 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>

你有建议吗？

【问题讨论】：

标签： javascript jquery vis.js

【解决方案1】：

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

如果您不使用任何 js 框架（ext.js、Angular 和 maaany 更多），您将不得不处理/控制要维护的 javascripts 对象/变量。没有标准的 DOM -> javascript 对象映射。

以准系统的方式思考，我建议有一个初始化时间线的全局映射，映射键可以是 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({
        ...
  });
});

【讨论】：

我也使用 jQuery，我想我有一个像 $("mytimelineX").vis.Timeline().setOptions({...});但也许 vis.js 不允许这样做……或者这是错误的语法。您的解决方案是一个不错的选择。我在他们的“Git issue”中发布了一个请求，但目前我还没有回复。谢谢你