Question

我想动态更改时间轴选项。准备好文档后，我可以初始化1条或更多时间线，而foreach时间线我希望可以更改选项，数据或组。我不想初始化全局变量（调用它们很简单），因为我可以有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等），则必须处理/控制要维护的javascript对象/变量。没有标准的DOM-> javascript对象映射。

以准系统的方式考虑一下，我建议您使用一张初始化时间轴的全局地图，并且地图关键字可以是div id。为了使事情更易于维护，我还建议您使用一个标准函数来创建/初始化时间轴（并最终对其进行更改）。下面是一些未经测试的代码模型：

{{1}}

Vis.js时间轴动态变化

1 个答案: