ДОСТУПНА НОВАЯ ВЕРСИЯ! Webix 11 Подробнее Обновления в Core, SpreadSheet, File Manager и Report Manager и многое другое

Виджет Webix Timeline

Виджет для создания масштабируемой инфографики. Timeline будет полезен для отображения логов и последовательности событий. Вы можете задавать цвета, настраивать содержимое и положение точек, а также загружать в виджет данные и обрабатывать их.

живое демо

01 Aug, 2019
Found
Found a red mouse. Very currious. Wonderring if it is worrthy of obserrvation.
02 Aug, 2019
Observed
Worrthy. Was obserrving the object for 2.4 hours, then Ms. Higgins called for supper. Obserrvation paused.
03 Aug, 2019
Initial Hypothesis
Started thinking on the hyposesis. Then had to pause thinking, because Ms Higgins called for brreakfast.
04 Aug, 2019
Observation and initial testing
The subject is cleverr: doesn't fall for fake grrains and seeds.
05 Aug, 2019
Hunting strategies
Starrted to plot my hunting strategies. Had to pause, because Ms. Higgins brrought some meat. Delicious.
06 Aug, 2019
Hunting: First stage
The subject is extrremely agile and fast. Have to rethink the hunting strrategies.
07 Aug, 2019
Puzzled
The subject behaves in an unexpected manner: when I put Ms. Higgins' enamel pan as a trap, the subject pourred milk and left a letter. The subject is a wonderful strategist. Cleverr trrap.
08 Aug, 2019
Rethinking strategies
Ah, Ms. Higgins calls for dinner, no time. Tomorrow.
09 Aug, 2019
New strategies
What if my strategies are wrong?
10 Aug, 2019
The end
Drrinking milk together with Mr. Reddie the Mouse, my friend.
  • Интеграция: jQuery, Angular, React, Vue.js, Backbone
  • Поддержка всех современных браузеров
  • Работает на устройствах с сенсорным экраном
  • Соответствует требованиям Секции 508
  • Удобная стилизация с помощью CSS

Другие виджеты Webix для задач планирования:

Обзор

Виджет Timeline - это готовое решение для отображения красивой и понятной инфографики. Вы можете настроить любую часть виджета и настроить взаимодействие с ним.

Изменение вида и содержимого

Вы можете изменять текст для каждого элемента Timeline с помощью темплейтов и применять CSS к любой части виджета.

01 August 2019
Log entry 1: Found

Found a red mouse. Very currious. Wonderring if it is worrthy of obserrvation.

End of entry
02 August 2019
Log entry 2: Observed

Worrthy. Was obserrving the object for 2.4 hours, then Ms. Higgins called for supper. Obserrvation paused.

End of entry
03 August 2019
Log entry 3: Initial Hypothesis

Started thinking on the hyposesis. Then had to pause thinking, because Ms Higgins called for brreakfast.

End of entry
04 August 2019
Log entry 4: Observation and initial testing

The subject is cleverr: doesn't fall for fake grrains and seeds.

End of entry
05 August 2019
Log entry 5: Hunting strategies

Starrted to plot my hunting strategies. Had to pause, because Ms. Higgins brrought some meat. Delicious.

End of entry
06 August 2019
Log entry 6: Hunting: First stage

The subject is extrremely agile and fast. Have to rethink the hunting strrategies.

End of entry
07 August 2019
Log entry 7: Puzzled

The subject behaves in an unexpected manner: when I put Ms. Higgins' enamel pan as a trap, the subject pourred milk and left a letter. The subject is a wonderful strategist. Cleverr trrap.

End of entry
08 August 2019
Log entry 8: Rethinking strategies

Ah, Ms. Higgins calls for dinner, no time. Tomorrow.

End of entry
09 August 2019
Log entry 9: New strategies

What if my strategies are wrong?

End of entry
10 August 2019
Log entry 10: The end

Drrinking milk together with Mr. Reddie the Mouse, my friend.

End of entry

Типы Timeline

Вы можете выбрать один из доступных типов расположения элементов виджета: left, right, и alternate.

Кликните по вкладкам, чтобы посмотреть на все типы.

01 Aug, 2019
Found
Found a red mouse. Very currious. Wonderring if it is worrthy of obserrvation.
02 Aug, 2019
Observed
Worrthy. Was obserrving the object for 2.4 hours, then Ms. Higgins called for supper. Obserrvation paused.
03 Aug, 2019
Initial Hypothesis
Started thinking on the hyposesis. Then had to pause thinking, because Ms Higgins called for brreakfast.
04 Aug, 2019
Observation and initial testing
The subject is cleverr: doesn't fall for fake grrains and seeds.
05 Aug, 2019
Hunting strategies
Starrted to plot my hunting strategies. Had to pause, because Ms. Higgins brrought some meat. Delicious.
06 Aug, 2019
Hunting: First stage
The subject is extrremely agile and fast. Have to rethink the hunting strrategies.
07 Aug, 2019
Puzzled
The subject behaves in an unexpected manner: when I put Ms. Higgins' enamel pan as a trap, the subject pourred milk and left a letter. The subject is a wonderful strategist. Cleverr trrap.
08 Aug, 2019
Rethinking strategies
Ah, Ms. Higgins calls for dinner, no time. Tomorrow.
09 Aug, 2019
New strategies
What if my strategies are wrong?
10 Aug, 2019
The end
Drrinking milk together with Mr. Reddie the Mouse, my friend.

Горизонтальное расположение

Данные в Timeline можно организовать в горизонтальном виде.

Кликните по вкладкам, чтобы посмотреть на все типы.

01 Aug, 2017
Available
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus.
10 Sep, 2017
Taken
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus.
11 Dec, 2017
Broken
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus.
10 Feb, 2018
Fixed
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus.
15 Mar, 2018
Available
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus.
21 Mar, 2018
Taken
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus.
16 May, 2019
Broken
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus.
02 Jun, 2019
Fixed
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus.
10 Sep, 2019
Available
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus.
23 Sep, 2019
Deprecated
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est sit amet augue aliquam vestibulum. Donec tempus erat in gravida dapibus.

Timeline API

У Timeline есть API, позволяющее работать с данными: добавлять, обновлять, удалять, фильтровать и сортировать элементы.

Нажмите 'Start', чтобы начать запись в Timeline.

30 Jul, 2019
Good dinner
Ms. Higgins perfected her skills in making souffle
31 Jul, 2019
Butter flies
Let butter fly like butterflies. I wish Ms. Higgins appreciated the poetry of a broken butter bowl as much as I do.