在时间线上定位条目

Question

您好我的应用程序中有日历/日程表，看起来与此基本示例类似，

  

| Jan |二月| Mar |四月|君|七月|八月|九月|十月| 11月| 12月|

     

---

     

项目＃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 + "%");

但是没有类似的工作来定位项目。

Answer 1

根据屏幕上日历的总宽度计算保证金。

width = calendar width in pixels * decimal

如果我理解正确，您计算中的十进制是项目开始前的天数百分比，即日历中的总天数。

Answer 2

我们说我们有这些价值

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%;