使用 JavaScript 重置图形数据

Question

我在 JavaScript 中创建的图表有问题。我的图表从销售对象中获取数据并将其显示在图表中。我正在尝试添加一个按钮，以便在单击它时，所有 sales.Sales 值都设置为 0，因此将图形重置为空白。我曾尝试使用循环遍历它，但是，它只删除了 12 月 div 而不是其他 11 个月。我在下面包含了 HTML 和 JavaScript。

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel = "stylesheet" href = "css/styles.css">
    </head>
    <body>
        <script src = "js/sales-graph.js"></script>
        <h1 id = "main_title">Titan Sports and Apparel LLC</h1>
        <div id = "labels"></div><br />

        <footer>© Titan Sports and Apparel LLC | Email: TitanSportsApparel@gmail.com</footer>
        <br />
        <br />
        <br />
        <br />
        <button id = "resetgraph">Reset Graph</button>
    </body>
</html>



function barGraph (sales) {

    //Create graph
    var graph = document.createElement("div");
    graph.style.position = "relative";
    graph.style.marginTop = "20%";
    
    //Set height
    var Maxheight = 0;
    for (var i = 0; i < sales.length; i += 1) {
        Maxheight = Math.max(Maxheight, sales[i].value);
    }
    graph.style.height = (Maxheight + 10) + "px";
    
    //Give graph border
    graph.style.borderBottomStyle = "solid";
    graph.style.borderBottomWidth = "1px";

    //Iterate through data
    var position = 0;

    var width = 80;

    for (i = 0; i < sales.length; i += 1) {
        var salesItem = sales[i];
        var bar = document.createElement("div");

        //Bar styling
        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";

        //Only removes december?
        document.getElementById("resetgraph").addEventListener("click", function() {
            for (j = 0; j < sales.length; j++) {
                bar.style.height = "0px";
                bar.innerText = "";
            }
        });

        //Append
        graph.appendChild(bar);
        //Set bar width
        position += (width * 2);
    }
    
    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);
};

Answer 1

在您的代码中，您循环遍历了所有销售项目，但您仅在当前栏上应用了样式，对于您的情况，这是最后一个项目，即 12 月。

所以，我所做的是，设置一个唯一的 ID，给他们每个酒吧的月份名称，然后点击按钮，我遍历所有销售项目，试图找到它们是否存在或不。如果他们这样做，那么只需在该条上应用您的样式。

var sales = [];

     document.getElementById("resetgraph").addEventListener("click", function() {
          for (j = 0; j < sales.length; j++) {
               //check if all the element exist according to their id
               var bar = document.getElementById(sales[j].Month);
               if(bar){
                    //if exist then remove
                    bar.style.height = "0px";
                    bar.innerText = "";
               }else{
                    console.log("element not exist");
               }
          }
     });

     function barGraph (sales) {

          //Create graph
          var graph = document.createElement("div");
          graph.id = "mainGraph";
          graph.style.position = "relative";
          graph.style.marginTop = "20%";

          //Set height
          var Maxheight = 0;
          for (var i = 0; i < sales.length; i += 1) {
          Maxheight = Math.max(Maxheight, sales[i].value);
          }
          graph.style.height = (Maxheight + 10) + "px";

          //Give graph border
          graph.style.borderBottomStyle = "solid";
          graph.style.borderBottomWidth = "1px";

          //Iterate through data
          var position = 0;

          var width = 80;

          for (i = 0; i < sales.length; i += 1) {
          var salesItem = sales[i];
          var bar = document.createElement("div");
          //set an unique id for each of the bar graph
          bar.id = sales[i].Month;

          //Bar styling
          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";

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

          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 () {
      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);
     };

 <h1 id = "main_title">Titan Sports and Apparel LLC</h1>
        <div id = "labels"></div><br />

        <footer>© Titan Sports and Apparel LLC | Email: TitanSportsApparel@gmail.com</footer>
        <br />
        <br />
        <br />
        <br />
        <button id = "resetgraph">Reset Graph</button>

使用 JavaScript 重置图形数据

Resetting data of graph using JavaScript

html

javascript

graph