我想动态更改时间线选项。 当文档准备好时，我可以初始化 1 个或多个时间线，并且对于每个时间线，我希望能够更改选项、数据或组。 我不想初始化全局变量(调用它们很简单)，因为我可以有 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>你有建议吗？
最佳答案
TLDR:没有全局变量(或某些 js 框架)是不可能的，但是您可以定义一个全局映射(关联数组、js 对象)以避免为每个所需的时间线创建一个新的全局变量。
如果您不使用任何 js 框架(ext.js、Angular 等)，您将必须处理/控制要维护的 javascript 对象/变量。没有标准的 DOM -> javascript 对象映射。
以简单的方式思考，我建议拥有一个初始化时间线的全局 map ， map 键可以是 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({
...
});
});
关于javascript - Vis.js 时间线动态变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52593138/