Значение CSS 'height' идет вниз, а не вверх

Question

Я использую JavaScript для создания простой гистограммы.Я хочу, чтобы бары поднимались, а не падали.Как я могу это сделать?

Обратите внимание, что mainContainer ссылается на div в HTML и что я только добавляю стили с помощью javascript.

var sampleData = [2, 8, 4, 5, 7, 3];

var mainContainer = document.querySelector(".graphite-container");

var addColumns = function(data) {
  for (i = 0; i < data.length; i++) {
    var column = document.createElement("div");
    column.className = "graphite-column";
    column.Id = 'column-' + (i + 1);
    column.innerHTML = column.Id;
    var columnValue = '';
    columnValue += (data[i] * 25) + 'px';
    $(column).css({
      "display": "inline-block",
      "height": columnValue,
      "background-color": "blue"
    });
    $(mainContainer).append(column);
  }
};

addColumns(sampleData);

Answer 1

G'day.Начальная точка для компьютерных дисплеев - верхний левый угол.Это не нижний левый угол, как вы привыкли.Вероятно, это коренная причина вашей проблемы.Это скорее ошибка алгоритма, чем ошибка программирования.

Answer 2

Вам нужно установить vertical-align:bottom; на столбцы.

var sampleData = [2, 8, 4, 5, 7, 3];

var mainContainer = document.querySelector(".graphite-container");

var addColumns = function(data) {
  for (i = 0; i < data.length; i++) {
    var column = document.createElement("div");
    column.className = "graphite-column";
    column.Id = 'column-' + (i + 1);
    column.innerHTML = column.Id;
    var columnValue = '';
    columnValue += (data[i] * 25) + 'px';
    $(column).css({
      "display": "inline-block",
      "height": columnValue,
      "background-color": "blue",
      "vertical-align": "bottom"
    });
    $(mainContainer).append(column);
  }
};

addColumns(sampleData);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="graphite-container"></div>