如何缩放条形图列以使其正确且成比例地装入其容器？

Question

I am building a simple bar chart library with vanilla JS and jQuery. I have this code, which works:

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);
}

But since I'm drawing the height based directly on the value of the data converted to pixels, it's not possible to deal with larger numbers (like 400, 450, 430, 500). The column just turns into a huge bar that you have to scroll through. My math isn't very great; How can I draw the column height in a better way, based on a percentage maybe?

Or maybe there is a way to simply scale the values down to be proportionate to the size of the container? Really not sure how to go about it.

Answer 1

You can set up a proportion where you define the max height equal to the container size (assume 150px height) and then you calculate the size of the current value basing on that.

20 : X = 500 : 150

where 20 is the current element value, X is your variable to calculate and on the other side you have 500 (max array value) and 150 (max height you can support in px)

So resolving it would be equal to 500 * X = 150 * 20 => X = (150*20) / 500 which is equal to 6 (px).

You can use percentage also just putting 100 instead of 150 and assuming that the values are all relative (percentage)