我需要一些帮助在我的图表上绘制时间。我有一个网格，在我的 html 页面上水平交叉有 24 个框。每个框代表一个小时，在我的电子表格中定义的宽度为 28px。第一个盒子从上午 12 点开始，然后一直持续到晚上 11 点（一天 24 小时）。
我现在需要做的就是在网格上绘制我的项目，唯一的问题是我无法弄清楚数学来计算左侧位置应该从哪里开始以及它应该有多宽。我的代码中的左侧位置基于百分比，0% 是凌晨 12 点的开始。宽度以像素为单位。有谁能给我指路？
所以假设我有以下项目，每个项目的左侧位置 （%） 和宽度 （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 = 28 px。时间可以用h小时和m分钟表示。
基本上，你只想找出每个框的开始和结束，你可以将其转换为像素宽度，并将其转换为百分比。
-
h + m/60会给你几个小时。 乘以宽度得到时间的像素位置：(h + m/60)*w。（快速健全性检查：1：30 应为 1 个半宽度或 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%