Visjs动态更新时间轴项目

问题描述：

我正在使用visjs Timeline，我试图让项目从当前时间扩展为2天。Visjs动态更新时间轴项目

var items = new vis.DataSet([{ 
    id = 0, 
    start = moment(new Date()), 
    end = moment(new Date()).add(2, 'days') 
}, /* And maybe more items */]);

当创建一个新的时间线：

var container = document.getElementById('container'); 
var timeline = new vis.Timeline(container, items, null);

现在我想更新我的项目之一（比方说，第一个），这样它总是从当前时间开始。我认为currentTimeTick将是更新的好地方：

timeline.on('currentTimeTick', function() { 
    var itemData = timeline.itemSet.items[0].data; 
    itemData.start = moment(); // Set the start to current time 
    timeline.itemSet.items[0].setData(itemData); 
}

当我在Chrome调试，我看到，在设定的项目开始时间改变了，但我不知道为什么UI不更新以反映这一变化（我预计该项目的开始与我目前的时间相匹配）。

我经历了源代码，在我看来，setData应该导致时间轴上的redraw，但我不认为这是发生。当我拖动时间轴时，会导致重绘，并且相应地调整项目的大小。我需要在这里强制执行redraw吗？

答

虽然调用timeline.redraw()是一个选项，它会导致整个时间表被重绘，这是昂贵的。

的RangeItem有方法repositionX在其prototype，这显然调整个别项目的水平位置，所以我所做的是我设置了数据之后调用这个位置：

timeline.itemSet.items[0].setData(itemData); 
timeline.itemSet.items[0].repositionX();

编辑：作为@madebydavid建议而不是直接调用repositionX和setData，我们可以代替上述与此单条线的两条线：

timeline.itemsData.update(itemData);

谢谢@madebydavid

我想如果你在'vis.DataSet'上调用'update'方法，它会自动触发重绘。 'timeline.itemSet.update（的ItemData）;'。你不需要这样调用'setData'或'repositionX'。 – madebydavid

感谢您的信息。我会尝试看看它是否具有相同的行为 – Farzad

我试过了，但它给出了一个错误：'timeline.itemSet.update'不是函数 – Farzad

答

您是否尝试重绘时间表？

timeline.redraw();

谢谢您的回复。实际上，'redraw'函数会导致整个时间线重新绘制，这是非常昂贵的。我最终在项目上使用了'repositionX' – Farzad

Visjs动态更新时间轴项目

相关推荐