Javascript 如何通过div添加重叠的水平线？

我正在使用javascript制作一个简单的条形图。所有样式都是通过javascript完成的。我有一个主容器：

var mainContainer = document.getElementById(element);
var chartContainer = document.createElement("div");
chartContainer.class = "graphite-container";
$(chartContainer).css({
  "padding-left": "50px",
  "height": "100%",
  "border-width": "1px",
  "border-style": "solid",
  "border-color": "black",
  "width": "100%",
  "margin-top": "20px",
  "padding-top": "20px"
});
$(mainContainer).append(chartContainer);

我有几条线，我想穿过容器来做高度标记：

var addLines = function(dataObj) {
var specs = Object.values(dataObj);
var highestNumber = 0;
for (i = 0; i < specs.length; i++) {
  if (specs[i] > highestNumber) {
    highestNumber = specs[i];
  }
}
var interval = Math.round(highestNumber / 5);

for (i = 0; i <= highestNumber ; i += interval) {
  var separator = document.createElement("hr");
  separator.class = "horizontal-line";
  var separatorHeight = separatorInterval + '%';
  $(separator).css({
    "position": "absolute",
    "width": "100%",
    "color": "black",
  });
  $(chartContainer).append(separator);
}
};

var addLines=函数（dataObj）{
变量规格=对象值（dataObj）；
var highestNumber=0；
对于（i=0；i最高数量）{
最高数量=规格[i]；
}
}
var间隔=数学四舍五入（最高数字/5）；
对于（i=0；您是否尝试了“底部：0”？您没有传递计算的高度。添加：“高度”：分隔符高度。此外，颜色仅适用于文本，请使用“边框”：“1px纯黑色”相反，我没有通过我计算的高度，因为高度不在周期内工作。出于某种原因，所有5条线都在同一个位置，除非我不使用绝对定位，但它们刚好高于一切。