Как я могу масштабировать столбец гистограммы, чтобы он правильно и пропорционально помещался внутри контейнера? - PullRequest
Новая
       13

Как я могу масштабировать столбец гистограммы, чтобы он правильно и пропорционально помещался внутри контейнера?

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

Я строю простую библиотеку гистограмм с использованием vanilla JS и jQuery.У меня есть этот код, который работает: 

var userData = {
'Black': 8,
'Latino': 6,
'Native': 4,
'Asian': 10,
'White': 12,
'Indian': 9,
'Other': 5
};

var addColumns = function(dataObject) {
  var values = Object.values(dataObject);

  var columnContainer = document.createElement("div");
  $(columnContainer).css({
  "display": "flex",
  "flex-direction": "row",
  "align-items": "flex-end",
  "position": "relative",
  "padding-top": "8px",
  "margin-left": "50px",
  "padding-bottom": "10px"
  });

 for (i = 0; i < values.length; i++) {
  var column = document.createElement("div");
  column.innerHTML = '<br>' + values[i];
  $(column).css({
    "margin-right": "30px",
    "width": "90px",
    "background-color": "#68b24a",
    "text-align": "center",
    "text-padding": "20px",
    "height": values[i] * 20 + "px",
    "z-index": "1"
  });
  $(mainContainer).append(columnContainer);
  $(columnContainer).append(column);
}

Но так как я рисую высоту, основанную непосредственно на значении данных, преобразованных в пиксели, невозможно работать с большими числами (например, 400, 450, 430, 500).Колонна просто превращается в огромную полосу, через которую нужно пролистывать.Моя математика не очень хорошая;Как я могу нарисовать высоту столбца лучше, на основе процента может быть?

Или, может быть, есть способ просто уменьшить значения, чтобы они были пропорциональны размеру контейнера?На самом деле не знаю, как это сделать.

1 Ответ

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

Вы можете установить пропорцию, в которой вы определяете максимальную высоту, равную размеру контейнера (допустим, высоту 150px), а затем рассчитываете на основе этого размер текущего значения.

20 : X = 500 : 150

где 20 - текущее значение элемента, X - ваша переменная для вычисления, а с другой стороны у вас есть 500 (максимальное значение массива) и 150 (максимальная высота, которую вы можете поддерживать в пикселях)

Таким образом, разрешение будет равно 500 * X = 150 * 20 => X = (150 * 20) / 500, что равно 6 (px).

Вы также можете использовать процент, просто помещая100 вместо 150 и при условии, что все значения являются относительными (в процентах)

...