Javascript 在时间轴上定位条目

您好，我在一个应用程序中有日历/时间表，看起来与这个非常基本的示例类似

|一月|二月|三月|四月|六月|七月|八月|九月|十月|十一月|十二月|

---

项目1（从1月初到3月中旬）

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

项目标题下的点说明了项目的长度，我正在努力为条目提供正确的左边距值，以将项目推到正确的开始日期

我所掌握的数字如下：

项目运行的天数

2014年1月1日至项目第一天之间的天数

日历中的总天数（日历运行于2014年1月至2019年12月）

容纳日历的容器的宽度

我以为会是这样的：

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

但这一回报率太接近了，一月和八月之间几乎没有任何差别

我用这个总数算出了项目的长度

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

---

如果我理解正确，在您的计算中，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

宽的，根据上面的公式，最终结果将是

左边距：49.86%

让我们假设

日历中的天数=365

，

项目开始的日期=91

和

容器=365px

=>

（（91/365）*100）*（365px/365）=左边距：24.93%

如果容器是，让我们说

730px

最终结果将是

左边距：49.86%是您的解决方案，谢谢。