在时间轴上定位条目

positioning entries on a timeline

本文关键字：定位 时间      更新时间：2023-09-26

你好，我有一个日历/日程安排在一个应用程序中，看起来类似于这个非常基本的例子，

| Jan | Feb | Mar | Apr | Jun | Jul | Aug | Sep | Oct | Nov | Dec |

项目# 1(从1月到3月中旬开始 ) ...............

            Project #2 (Runs from mid march to early september)
            ..............................

项目标题下的点说明了项目的长度，我正在努力的是给条目左侧空白的正确值，以将项目推到正确的开始日期。

我能得到的数字是:

  1. 项目运行天数，
  2. 从2014年1月1日到项目第一天的天数。
  3. 日历中的总天数(日历运行时间为2014年1月至2019年12月)。
  4. 日历容器的宽度。

我想应该是这样的:

var remainder = number_of_days_in_calendar - this.model.get('num_days_from_year_start');
var decimal = remainder / number_of_days_in_calendar;
var marginLeft = decimal * 100 + "%";

但是这个返回的百分比太接近了，1月和8月之间几乎没有任何差异。

我用这个和成功地算出了项目长度，

var width = (parseInt(this.model.get('run_number_days')) / number_of_days_in_calendar) * 100;
this.$el.width(width + "%");

根据日历在屏幕上的总宽度计算页边距。

width = calendar width in pixels * decimal

如果我理解正确的话小数在你的计算中是指项目开始前的天数占日历中总天数的百分比。

假设我们有这些值

number_of_days_in_calendar = 365
day_when_project_started = 91
container_width = 365px

这就是我们如何计算左距

的位置
((91 / 365) * 100) * (365px / 365) = margin-left: 24.93%

如果容器是，例如730px宽，根据上面的公式，最终结果将是margin-left: 49.86%;

相关文章：