4

我正在使用visjs Timeline，并且我试图让一个项目从当前时间扩展 2 天。

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这里吗？

4

3 回答 3

4

虽然调用timeline.redraw()是一种选择，但它会导致整个时间线被重新绘制，这很昂贵。

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

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

编辑：正如@madebydavid 建议的那样，我们可以用这一行替换上面的两行，而不是直接调用repositionX和：setData

timeline.itemsData.update(itemData);

谢谢@madebydavid

于 2017-06-13T21:40:34.387 回答
2

您是否尝试重新绘制时间线？

timeline.redraw();
于 2017-06-13T05:24:44.020 回答
1

基于版本 7.4.2，而不是index i.e [0]...， itemid作品：

// Get element from event
let element = e.target;

// Get item data
let itemData = prevTimeline.itemSet.items[element.id].data;

// Set end time based on the start time and duration
itemData.end = moment(itemData.start).add(moment(itemData.duration, 'HH:mm:ss').seconds(), 's');

// Update timeline data (auto refreshes)
prevTimeline.itemsData.update(itemData);
于 2020-11-30T04:13:20.700 回答