为什么createBar函数仅向数组推入一项且生成的柱状图高度均相同？

• 核心问题1：balances数组定义在createBar函数内部，每次触发函数都会重新初始化为空数组，每次仅存入当前输入的单条数据。
  此时取topMark = balances[0].balance时，topMark和唯一一条数据的balance永远相等，代入高度计算函数后，得到的高度永远是固定的400px，自然所有柱子高度完全一致。
• 次要问题2：输入框取到的balance.value是字符串类型，直接参与数值计算、排序时可能出现异常逻辑，比如字符串排序下"100" < "20"是成立的，会导致排序结果不符合预期。

修改后的JS代码 #

// 将balances数组提到函数外部，持久化存储所有历史输入数据
var balances = [];
function createBar() {
  function datas(date, balance) {
    this.date = date;
    this.balance = balance;
  }
  // 把balance.value转成数字类型
  var data = new datas(date.value, Number(balance.value));
  balances.push(data);
  balances.sort(function (a, b) {
    return b.balance - a.balance;
  });
  var topMark = balances[0].balance;
  var heightUnit = "px";
  var heightCalculate = function (amt) {
    var x = 100 / (topMark / amt);
    var y = (400 / 100) * x;
    return y;
  };
  // 清空原有柱子，避免重复渲染导致数量翻倍
  graphContainer.innerHTML = '';
  balances.forEach(function (item, index, arr) {
    var bars = document.createElement("div");
    bars.classList.add('barclass');
    bars.style.height = heightCalculate(item.balance) + heightUnit;
    bars.style.top = 500 - heightCalculate(item.balance) + heightUnit;
    graphContainer.appendChild(bars);
  });

  date.value = "";
  balance.value = "";
}

CSS代码无需调整 #

.barclass {
  width : 4px;
  margin-right : 1px; 
  margin-left : 1px; 
  display : inline; 
  float : left; 
  position: relative;
}

如果不需要保留所有历史输入的柱子，仅需要单次渲染多条数据，可以调整数据传入逻辑，不要每次调用函数仅传入单条数据即可。

内容的提问来源于stack exchange，提问作者Ghanshyam Sharma