Javascript Vis.js时间线动态变化

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

$（文档）.ready（函数（）{
var items=new vis.DataSet([
{id:1，组：1，内容：'item 1'，开始：'2013-04-17'，结束：'2013-04-18'}，
{id:2，组：2，内容：'item 2'，开始：'2013-04-14'，结束：'2013-04-15'}，
{id:3，组：3，内容：'item 3'，开始：'2013-04-16'，结束：'2013-04-17'}，
{id:4，组：3，内容：'item 4'，开始：'2013-04-15'，结束：'2013-04-16'}，
{id:5，组：1，内容：'item 5'，开始：'2013-04-18'，结束：'2013-04-19'}，
{id:6，组：1，内容：'item 6'，开始：'2013-04-19'，结束：'2013-04-20'}
]);
变量组=新的vis.DataSet([
{id:1，内容：'aaa'}，
{id:2，内容：'bbb'}，
{id:3，内容：'ccc'}，
]);
变量选项={
最小值：新日期（2013年3月1日），
最长：新日期（2013年3月30日），
开始日期：新日期（2013年4月1日），
完：新日期（2013年4月30日），
zoomMin:1000*60，
zoomMax:1000*60*60*24*30，
堆栈：false，
保证金：{
项目：20，//项目之间的最小余量
轴：10//项目与轴之间的最小余量
},
};
var container=document.getElementById（'mytimeline1'）；
新的可视时间线（容器、项目、组、选项）；
var items2=新的vis.DataSet([
{id:4，组：3，内容：'item 7'，开始：'2013-04-15'，结束：'2013-04-16'}，
{id:5，组：1，内容：'item 8'，开始：'2013-04-18'，结束：'2013-04-19'}，
{id:6，组：1，内容：'item 9'，开始：'2013-04-19'，结束：'2013-04-20'}
]);
var groups2=新的vis.DataSet([
{id:1，内容：'ddd'}，
{id:2，内容：'eee'}，
{id:3，内容：'fff'}，
]);
var container2=document.getElementById（'mytimeline2'）；
新的可视时间线（容器2、项目2、组2、选项）；
});
//我不想初始化全局变量（很简单），因为我可以有1、2或n个时间线。。。
$（document）.on（“click”，“.settle1”，function（）{
警报（“我想通过.setOptions（）更改mytimeline1设置”）；
//我想要一个sintax，比如：
//var container=document.getElementById（'mytimeline1'）；
//container.xxxx.setOptions({
//		...
// });
//可能吗？
});
$（document）.on（“click”，“.settle2”，function（）{
警报（“我想通过.setOptions（）更改mytimeline2设置”）；
//我想要一个sintax，比如：
//var container=document.getElementById（'mytimeline2'）；
//container.xxxx.setOptions({
//		...
// });
//可能吗？
});
#我的时间线1，#我的时间线2{
边框：1px纯色灰色；
填充物：5px；
}
.vis.timeline.labelset.vlabel.inner{
最小高度：100px；
}

固定群高
Zoom1（单击我）
Zoom2（单击我）
TLDR：没有全局变量（或一些js框架）是不行的，但您可以定义一个全局映射（关联数组，js对象），以避免为每个所需的时间线使用新的全局变量

如果您没有使用任何js框架（ext.js、Angular和其他），那么您必须处理/控制要维护的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，我想我有一个类似sintax的$（“mytimelineX”）.vis.Timeline（）.setOptions（{…}）；但也许vis.js不允许这样做。。。或者这是错误的辛塔克斯。你的解决方案是一个很好的选择。我在他们的“Git问题”中发布了一个请求，但目前我还没有得到回复。多亏了你