Как я могу добавить горизонтальные линии, перекрывающиеся через div? - PullRequest
Новая
       6

Как я могу добавить горизонтальные линии, перекрывающиеся через div?

0 голосов
/ 18 мая 2018

Я делаю простую гистограмму, используя 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);
}
};

Единственный способ, которым я могу получить строкипоказать, если я удаляю "position: absolute", но тогда они просто в верхней части столбцов, которые у меня есть.Я пытаюсь установить нижнюю границу, чтобы отделить их, но это не работает.Там должно быть какое-то правило CSS, которое я забыл.

...