Divs 高度相对于 div 内的某个数值

Question

我有一组积木，每个积木都有一些相关联的编号。我需要使块高度对应于这个数字。例如

如您所见，数字越大 - div 就越高。但它与 1:1 无关，对吧？否则我们甚至看不到编号为“1”或“10”的块。所以我想弄清楚如何计算这个近似高度。我知道它更像是数学任务。

更新：值也可以是任何分数，包括小于 1

Answer 1

也许可以循环每个值并检查是否

 if (largestValue > 100) {
      percentage = (currentValue / largestValue) * 100
      if ( percentage < 5 ) {
           BlockXUIHeight = 5
           BlockXUIWidth = 5
      }
 }

Answer 2

终于，我们有了一个可以解决这个问题的函数。

假设我们有一个包含 id 和相对数值的块对象数组。

function blockHeights(blocks) {
  const MAX_HEIGHT_PX = 500;
  let logs = [];
  blocks.forEach((block) => {
      if (block.value) {
        logs.push(Math.log10(block.value));
      }
  });
  const minLog = Math.ceil(Math.min(...logs));
  const addition = minLog < 0 ? (1 - minLog) : 0;
  const maxLog = Math.ceil(Math.max(...logs)) + addition;
  const step = MAX_HEIGHT_PX / maxLog;
  let blockHeights = {};
  blocks.forEach((block) => {
      blockHeights[block.id] = Math.round(step * (Math.log10(block.value) + addition));
  });
  return blockHeights;
}

-------------------------------------------- --------------

还有另一种解决方案，在我的情况下效果更好：使用此处的公式：https://stats.stackexchange.com/a/281164/266299

并规范化所有值以适应您预定义的最小和最大块高度。这样函数看起来像这样：

 function blockHeights(blocks) {
  const MIN_BLOCK_HEIGHT_PX = 65;
  const MAX_BLOCK_HEIGHT_PX = 300;
  const maxMinDifference = MAX_BLOCK_HEIGHT_PX - MIN_BLOCK_HEIGHT_PX;
  const min = Math.min(...Object.values(blocks));
  const max = Math.max(...Object.values(blocks));
  blocks.forEach(block=> {
      result[block.id] = ((block.value - min) * maxMinDifference / (max - min)) + MIN_BLOCK_HEIGHT_PX;
   });
   return result;
 }

Divs 高度相对于 div 内的某个数值

Divs height relative to some number value inside the div

html

css

math

calculation

-------------------------------------------- --------------