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

Question

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

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

---

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

Answer 1

最后，我们有一个工作函数可以解决这个问题。

假设我们有一个带有 id 和相对数值的 blocks 对象数组。

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

Answer 2

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

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