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嗎？

來源

2017-06-06 Farzad

雖然調用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-13 21:40:34 Farzad

我想如果你在'vis.DataSet'上調用'update'方法，它會自動觸發重繪。 'timeline.itemSet.update（的ItemData）;'。你不需要這樣調用'setData'或'repositionX'。 – madebydavid

感謝您的信息。我會嘗試看看它是否具有相同的行爲 – Farzad

我試過了，但它給出了一個錯誤：'timeline.itemSet.update'不是函數 – Farzad

您是否嘗試重繪時間表？

timeline.redraw();

來源

2017-06-13 05:24:44

謝謝您的回覆。實際上，'redraw'函數會導致整個時間線重新繪製，這是非常昂貴的。我最終在項目上使用了'repositionX' – Farzad

Visjs動態更新時間軸項目

回答

相關問題