Visjs динамически обновляет элемент временной шкалы

1

Я использую 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, я вижу, что время начала в наборе элементов изменено, но я не уверен, почему пользовательский интерфейс не обновлен, чтобы отразить это изменение (я ожидаю, что начало элемента соответствует моему текущему времени),

Я просмотрел исходный код, и мне кажется, что setData должен вызвать redraw на временной шкале, но я не думаю, что это происходит. Когда я перетаскиваю временную шкалу, она вызывает перерисовку, и элемент имеет соответствующий размер. Нужно ли мне что-то делать, чтобы заставить redraw здесь?

Теги:
vis.js
vis.js-timeline

2 ответа

2
Лучший ответ

Хотя вызов timeline.redraw() является опцией, это приводит к переделке всей временной шкалы, что дорого.

RangeItem имеет метод repositionX в его prototype, который, по- видимому регулирует горизонтальное положение отдельного элемента, так что я сделал это, чтобы назвать эту позицию после того, как я установил данные:

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

EDIT: Как предположил @madebydavid, вместо прямого вызова repositionX и setData, мы можем заменить две строки выше этой единственной строкой:

timeline.itemsData.update(itemData);

Спасибо @madebydavid

  • 0
    Я думаю, что если вы vis.DataSet метод update для vis.DataSet он автоматически вызовет перерисовку. timeline.itemSet.update(itemData); , Вам не нужно вызывать setData или repositionX таким образом.
  • 0
    Спасибо вам за информацию. Я попробую это, чтобы видеть, имеет ли это то же самое поведение
Показать ещё 6 комментариев
1

Вы пытались перерисовать временную шкалу?

timeline.redraw();
  • 0
    Спасибо за ваш ответ. На самом деле, функция redraw вызывает redraw всей временной шкалы, что является дорогостоящим. Я закончил тем, что использовал repositionX на самом элементе

Ещё вопросы

Сообщество Overcoder
Наверх
Меню