javascript — Math для расчета периода бронирования
Мне нужна помощь в составлении графика времени на моем графике. У меня есть сетка с 24 прямоугольниками, проходящими горизонтально на моей HTML-странице. Каждый блок представляет час и имеет определенную ширину 28 пикселей в моей электронной таблице. Первая коробка начинается в 12:00, а затем проходит до 11:00 (24 часа в сутки).
Что мне теперь нужно сделать, так это вывести свои элементы на сетку, единственная проблема в том, что я не могу понять математические расчеты, чтобы определить, откуда должна начинаться левая позиция и насколько она должна быть широкой. Левая позиция в моем коде основана на процентах, 0% — начало 12:00. Ширина указана в пикселях. Кто-нибудь может показать мне путь?
Допустим, у меня есть следующие элементы, каковы будут левая позиция (%) и ширина (px) для каждого. Мне просто нужна формула, чтобы понять, как ее кодировать и вставлять в мою сетку.
Name, StartTime, EndTime
Item 1, 9:55, 14:55
Item 2, 16:00, 17:45
Item 2, 18:10, 19:55
Решение
У тебя есть n = 24 коробки, ширина w = 28px каждый. Время может быть представлено h часы и m минут.
По сути, вы просто хотите определить начало и конец для каждого блока, и вы можете преобразовать это в ширину пикселя, и преобразовать тот в процентах.
-
h + m/60даст вам дробные часы. Умножьте на ширину, чтобы получить местоположение в пикселях времени:(h + m/60)*w, (Быстрая проверка работоспособности: 1:30 должно иметь ширину полтора или 42 пикселя.) -
Сделайте это оба раза, теперь у вас есть
start_pxа такжеend_px, Это позволяет вам рассчитатьwidth = end_px - start_px, -
Теперь вы можете преобразовать это в процент:
width_percent = width / total_width * 100 = width / (w * n) * 100
Итак, ваша окончательная формула должна выглядеть так:
start_px = (start_h + start_m/60)*w
end_px = (end_h + end_m/60)*w
width_percent = (end_px - start_px) / (w * n) * 100
Редактировать: Вот быстрый и грязный скрипт на Python 2 (именно то, что мне пригодилось) для запуска некоторых примеров.
def find_width(start_h, start_m, end_h, end_m, n, w):
start_px = (start_h + start_m/60.)*w
end_px = (end_h + end_m/60.)*w
width_percent = (end_px - start_px)/(w*n)*100
print "%d:%02d-%d:%02d Spans from %dpx to %dpx, or %.2f%%"%(start_h, start_m, end_h, end_m, start_px, end_px, width_percent)
n = 24 # 24 hours
w = 10 # width of 10, easier to check math
# entire day - should be 240 px or 100%
find_width(0,0, 24,0, n,w)
# half day - should be 50%
find_width(0,0, 12,0, n,w)
# try starting from not-zero
find_width(4,0, 16,0, n,w)
find_width(4,30, 5,30, n,w)
# try non-zero minutes
find_width(4,30, 16,30, n,w)
# try less than an hour
find_width(4,30, 5,00, n,w)
find_width(4,30, 4,45, n,w)
Это выводит:
0:00-24:00 Spans from 0px to 240px, or 100.00%
0:00-12:00 Spans from 0px to 120px, or 50.00%
4:00-16:00 Spans from 40px to 160px, or 50.00%
4:30-5:30 Spans from 45px to 55px, or 4.17%
4:30-16:30 Spans from 45px to 165px, or 50.00%
4:30-5:00 Spans from 45px to 50px, or 2.08%
4:30-4:45 Spans from 45px to 47px, or 1.04%
Другие решения
Других решений пока нет …