如何按比例缩放柱状图柱子以适配其容器？

嘿，这个问题我之前做图表的时候也踩过坑！直接把数据值转成像素高度，遇到大数值肯定会撑爆页面，咱们用比例缩放的思路就能完美解决——核心就是把所有数据映射到你设定的容器高度范围内，不管数据多大，柱子都能乖乖待在容器里。

核心思路 #

1. 找到数据基准：先找出数据中的最大值，这个值会对应柱子的最大高度。
2. 定义容器上限：设定你希望柱子能达到的最大高度（比如400px，或者动态获取容器的可用高度）。
3. 按比例计算高度：用「当前数值 / 数据最大值 × 容器最大高度」的公式，算出每个柱子的缩放后高度。

修改后的完整代码 #

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); 
    // 1. 获取数据中的最大值，作为缩放的基准
    var maxValue = Math.max(...values);
    // 2. 设定柱子的最大高度（可以改成动态获取容器高度，比如$(mainContainer).height() - 20）
    var maxColumnHeight = 400; 
    
    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",
        "height": maxColumnHeight + "px", // 给容器设置高度，限制柱子上限
        "border-bottom": "1px solid #ccc" // 可选：添加底部边框作为坐标轴
    }); 

    for (let i = 0; i < values.length; i++) { 
        var column = document.createElement("div"); 
        column.innerHTML = values[i]; 
        // 3. 按比例计算当前柱子的高度
        var scaledHeight = (values[i] / maxValue) * maxColumnHeight;
        $(column).css({ 
            "margin-right": "30px", 
            "width": "90px", 
            "background-color": "#68b24a", 
            "text-align": "center", 
            "padding-top": "5px", // 替换无效的text-padding属性
            "height": scaledHeight + "px", 
            "z-index": "1",
            "display": "flex",
            "align-items": "flex-end", // 让数值显示在柱子顶部
            "justify-content": "center",
            "padding-bottom": "5px"
        }); 
        $(columnContainer).append(column); 
    } 
    // 注意：把容器添加到mainContainer只需要执行一次，放在循环外面
    $(mainContainer).append(columnContainer); 
}

关键修改说明 #

• 修复了重复添加容器的bug：原来的代码把$(mainContainer).append(columnContainer)放在循环里，会导致每次循环都创建一个新容器，现在移到循环外只执行一次。
• 比例缩放逻辑：用Math.max(...values)快速获取数据最大值，再通过比例公式计算高度，确保最大数值的柱子刚好占满设定的最大高度，其他柱子按比例缩小。
• 优化了数值显示：用flex布局让数值固定在柱子顶部，替换了无效的text-padding属性，让样式更合理。

如果你的容器高度是动态变化的（比如窗口resize），还可以监听resize事件重新调用addColumns方法，或者单独写一个更新高度的函数，不过上面的代码已经能解决你当前遇到的大数值柱子过高的问题啦。

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