Visjs 动态更新时间线项目

Question

我正在使用 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 这里吗？

Answer 1

你试过重绘时间线吗？

timeline.redraw();

Answer 2

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

其prototype中的RangeItem has the method repositionX，显然是调整了单个item的水平位置，所以我做的是设置数据后调用这个位置：

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

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

timeline.itemsData.update(itemData);

谢谢@madebydavid

Answer 3

基于版本 7.4.2，而不是 index i.e [0]...，项目 id 有效：

// 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);

Visjs 动态更新时间线项目

Visjs Dynamically Update a Timeline Item

javascript

vis.js

vis.js-timeline