如何仅用HTML、CSS、JavaScript通过for循环创建正确柱状图？

问题根源分析 #

原代码无法正常显示柱状图的核心原因：

• 宽度无单位：设置柱子宽度时未添加px单位，浏览器无法识别数值对应的长度，导致柱子不显示。
• 布局错误：.bar默认是块级元素，每个柱子独占一行，无法形成横向并排的柱状图效果。
• 冗余外部脚本：引入了题目禁止的外部JS文件chart2.js。
• 数值干扰：柱子内的数值文本会撑开或遮挡柱子，影响视觉效果。

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bar Chart</title>

    <style>
        #chart {
            width: 100%;
            max-width: 600px;
            background-color: aliceblue;
            display: flex; /* 用flex实现柱子横向排列 */
            align-items: flex-end; /* 柱子从底部向上延伸，贴合常规柱状图样式 */
            height: 300px; /* 图表高度对应MAX数值 */
            gap: 1px; /* 柱子间的间隔 */
            padding: 0 10px;
            box-sizing: border-box;
        }
        .bar{
            background: green;
            flex: 1; /* 柱子均分图表宽度，适配数据点数量变化 */
            min-width: 1px;
        }
        .exceed{
            background: blueviolet;
        }
    </style>

</head>
<body> 
    <div id="chart"></div>

<script>
const DPOINTS = 400;
const MAX = 300;
const EXCEED = 0.8;

let chart = document.getElementById("chart");

for (let c = 0; c <= DPOINTS; c++){
    // 调整数值范围到0-MAX，匹配图表高度
    value = Math.abs(Math.cos(c/180 * Math.PI)) * MAX;   

    let div = document.createElement("DIV");
    div.style.height = value + 'px'; // 高度表示数值，添加px单位
    div.classList.add("bar");

    if (value > MAX * EXCEED) {
        div.classList.add("exceed");
    }

    chart.appendChild(div);
}
</script>
</body>
</html>

关键修改说明 #

1. 布局调整：给#chart设置display: flex和align-items: flex-end，让柱子横向并排且从底部向上延伸，符合常规柱状图视觉逻辑。
2. 单位补充：给高度值添加px单位，确保浏览器正确解析长度。
3. 数值逻辑优化：调整value计算方式，将数值范围限制在0到MAX之间，与图表高度匹配。
4. 冗余内容移除：删除外部脚本引用和柱子内的数值文本，满足题目要求并优化视觉效果。
5. 宽度适配：给.bar添加flex: 1，让柱子均分图表宽度，无需手动设置固定宽度。

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