С рисованием стобиков случайной длины в свг разобрался. Теперь можно вспомнить, что столбики должны отражать некие данные. А для этого данные нужно представить в программе с помощью каких-то объектов.
График состоит из нескольких отдельных событий. Чтобы описать каждое из них, нужно три значения: дата начала, дата конца и название.
Название события, ясное дело, нужно хранить в строке. Для дат жс предлагет использовать специально предназначенный тип объекта Date.
Хранить все три значения для одного события буду при помощи объектов. Это такой тип данных в джаваскрипте, представляющий собой набор ключей и соответствующих им значений. Создание события будет выглядеть так:
const event = {
name: 'ЧМ 2018',
start: new Date('2018-06-14'),
end: new Date('2018-07-15')
}
Получить отдельное значение из объекта можно по ключу через точку или квадратные скобки:
event.name // ЧМ 2018
event['start'] // 2018-06-14T00:00:00.000Z
Диаграмма тогда будет представленна массивом из нескольких таких объектов. Следующая задача — написать функцию, которая получает массив с событиями и возвращает ДОМ-элемент, отображающий диаграмму с этими событиями.