不依赖库实现柱状图：柱状高度比例计算适配问题

问题核心是硬编码的缩放系数（0.04）无法适配不同范围的数据，导致大数值被maxHeight截断后高度趋同。要让最高柱子恰好达到195px，需基于数据的相对比例动态计算高度：

修正步骤 #

• 先找出数据中的最大值，作为比例基准
• 每个柱子的高度 = (当前数值 / 最大值) × 195px
• 处理最大值为0的边界情况，避免除以0错误
• 修正代码中的拼写错误（dipley → display）

修改后的完整代码 #

export default function App() {
  const fees = [123, 0, 7000, 56, 349, 4500];
  const maxFee = Math.max(...fees);
  
  return (
    <div
      className="App"
      style={{
        display: "flex",
        flexDirection: "row",
        alignItems: "flex-end",
        // 可选：给容器加固定高度，确保柱子底部对齐
        height: "195px"
      }}
    >
      {fees.map((item, index) => {
        // 处理最大值为0的情况，避免除以0
        const barHeight = maxFee === 0 ? 0 : (item / maxFee) * 195;
        
        return (
          <div key={index} style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
            <p>{item} $</p>
            <div
              style={{
                width: "32px",
                height: `${barHeight}px`,
                backgroundColor: "#FC7D5D",
                margin: "0 10px"
              }}
            />
          </div>
        );
      })}
    </div>
  );
}

关键说明 #

• 用Math.max(...fees)动态获取数据最大值，不管数据范围多大，都能保证最高柱子刚好填满195px的高度
• 比例计算(item / maxFee) * 195让所有柱子按相对值缩放，不会出现大数值被截断后高度趋同的问题
• 增加容器固定高度height: "195px"，可以更直观地看到柱子和容器的比例关系

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