javascript - 如何缩放条形图列以正确且按比例地适合其容器？

Question

我正在使用 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)。该列只是变成一个巨大的栏，您必须滚动浏览。我的数学不是很好；我怎样才能以更好的方式绘制列高，也许是基于百分比？

或者也许有一种方法可以简单地将值按比例缩小以与容器的大小成比例？真的不知道该怎么做。

Answer 1

您可以设置一个比例，将最大高度定义为容器大小(假设高度为 150 像素)，然后根据该比例计算当前值的大小。

20 : X = 500 : 150

其中 20 是当前元素值，X 是您要计算的变量，在另一侧您有 500(最大数组值)和 150(您可以支持的最大高度，以像素为单位)

因此解析它等于 500 * X = 150 * 20 => X = (150*20)/500 等于 6 (px)。

您也可以使用百分比，只需输入 100 而不是 150，并假设这些值都是相对的(百分比)