JavaScript实现图表数据重置时仅12月柱形被清空如何解决

问题原因 #

1. 变量作用域问题：循环中使用var声明bar变量，var不存在块级作用域，整个循环过程共享同一个bar变量，循环结束后bar只会指向最后一次创建的12月对应的柱形元素，所以点击事件触发时只会修改最后一根柱子的样式。
2. 事件重复绑定：你把点击事件的监听逻辑写在了遍历生成柱形的循环里，等于给同一个重置按钮绑定了12次完全重复的点击事件，属于多余操作。
3. 额外笔误：原代码计算图表最大高度时取的是sales[i].value，但你实际数据里的销售额字段是Sales，会导致图表高度计算错误。

修复方案 #

你可以把所有生成的柱形存到一个数组里，再把点击事件绑定逻辑移到循环外部，点击时遍历所有柱形修改样式，同时同步修改sales数组中的Sales值为0即可。

修改后的完整JavaScript代码 #

function barGraph (sales) {
    // 创建图表容器
    var graph = document.createElement("div");
    graph.style.position = "relative";
    graph.style.marginTop = "20%";
    
    // 计算图表最大高度
    var Maxheight = 0;
    for (var i = 0; i < sales.length; i += 1) {
        Maxheight = Math.max(Maxheight, sales[i].Sales);
    }
    graph.style.height = (Maxheight + 10) + "px";
    
    // 添加图表底部边框
    graph.style.borderBottomStyle = "solid";
    graph.style.borderBottomWidth = "1px";

    // 遍历数据生成柱形
    var position = 0;
    var width = 80;
    // 新增：存储所有柱形元素的数组
    var barList = [];

    for (i = 0; i < sales.length; i += 1) {
        var salesItem = sales[i];
        var bar = document.createElement("div");
        // 把当前柱形存入数组
        barList.push(bar);

        // 柱形样式设置
        bar.style.position = "absolute";
        bar.style.left = position + "px";
        bar.style.width = width + "px";
        bar.style.backgroundColor = salesItem.Color;
        bar.style.height = salesItem.Sales + "px";
        bar.style.bottom = "0px";
        bar.innerHTML = salesItem.Sales;
        bar.style.fontSize = "20px";
        bar.style.textAlign = "center";

        graph.appendChild(bar);
        position += (width * 2);
    }

    // 重置按钮点击事件移到循环外部绑定
    document.getElementById("resetgraph").addEventListener("click", function() {
        for (j = 0; j < sales.length; j++) {
            // 修改柱形样式
            barList[j].style.height = "0px";
            barList[j].innerText = "";
            // 同步修改原始数据销售额为0
            sales[j].Sales = 0;
        }
    });
    
    return graph;
};

function addlabel (sales) {
    var labels = document.getElementById("labels")
    labels.style.marginTop = "1px";
    var width = 158.5;

    for (var i = 0; i < sales.length; i+= 1) {
        var labelcontent = sales[i];
        var label = document.createElement("span");

        label.innerHTML = labelcontent.Month;
        label.style.display = "inline-block";
        label.style.width = width + "px";
        label.style.paddingLeft = "0px"
        labels.appendChild(label);

    }
    return labels;
}

window.onload = function () {
    var sales = [
        {Month: "January", Sales: 40, Color: "Red"},
        {Month: "February", Sales: 10, Color: "Green"},
        {Month: "March", Sales: 100, Color: "Blue"},
        {Month: "April", Sales: 65, Color: "Yellow"},
        {Month: "May", Sales: 75, Color: "Brown"},
        {Month: "June", Sales: 120, Color: "Grey"},
        {Month: "July", Sales: 121, Color: "Turquoise"},
        {Month: "August", Sales: 175, Color: "Cyan"},
        {Month: "September", Sales: 220, Color: "Gold"},
        {Month: "October", Sales: 275, Color: "Grey"},
        {Month: "November", Sales: 300, Color: "Purple"},
        {Month: "December", Sales: 15, Color: "Pink"},
    ]
    
    var annotation = document.createElement("div")
    width = 1750;
    annotation.style.width = width + "px";
    annotation.style.textAlign = "center";
    annotation.innerHTML = "Sales are in thousands";

    var graph = barGraph(sales);
    var labels = addlabel(sales)
    document.body.appendChild(graph);
    document.body.appendChild(labels);
    document.body.appendChild(annotation);
};

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