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（您可以在px中支持的最大高度）

因此解析它将等于500 * X = 150 * 20 =＆gt; X =（150 * 20）/ 500，等于6（px）。

您也可以使用百分比也只是将100而不是150，并假设这些值都是相对的（百分比）

如何缩放条形图列以在其容器内正确和按比例拟合？

1 个答案: