Question

我尝试了几种不同的方法来将JavaScript生成的条形图放置到主div元素的主体中，而该图会生成其自己的div元素，但没有成功。有谁知道如何做到这一点？

已编辑

这里是CodePen 看看我在说什么。如您所见，我有一个包裹着身体的包装纸。但是，无论我将脚本放在何处，都无法将其放入包装器中。它总是在外部生成。

任何帮助将不胜感激。

这是代码。

HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Test</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="description" content="Issue Tracking System"/>
      <meta name="author" content="Stephen Morris">
      <link rel="stylesheet" type="text/css" href="tissue.css">
   </head>
   <body>
      <div id="wrapper">
         <h2>Test</h2>
         <div class="topnav">
            <a href="index.html">Home</a>
            <a href="Login.html">Login</a>
         </div>
         <div>
            <h2>Sales Subscription Dashboard</h2>
           <script src="js/subscriptions_graph.js">
         </div>
      </div>
      <div class="copyright">
         Copyright &copy; 2018 
      </div>
   </body>
   </script>
</html>

CSS

#wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 85%;
    border: groove; 
    border-color: white;
    padding: 2px;
}

#loginwrap {
    margin-left: auto;
    margin-right: auto;
    padding: 3px;
    text-align: center;
}

body {
    font-family: Georgia;
    padding: 10px;
    background: #f1f1f1;
    font-weight: bold;
}


/* top navigation bar */

.topnav {
    overflow: hidden;
    background-color: #333;
}


/* topnav links */

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}


/* Change color on hover */

.topnav a:hover {
    background-color: #ddd;
    color: black;
}


/* three columns next to each other */

.column1 {
    float: left;
    width: 30%;
    padding: 15px;
    height: 300px;
    text-align: center;
    background-color: #aaa;
}

.column2 {
    float: left;
    width: 30%;
    padding: 15px;
    height: 300px;
    text-align: center;
    background-color: #bbb;
}

.column3 {
    float: left;
    width: 30%;
    padding: 15px;
    height: 300px;
    text-align: center;
    background-color: #aaa;
}


/* Clear floats after the columns */

.row:after {
    content: "";
    display: table;
    clear: both;
}


/* Card-like background for each section */

.card {
    background-color: white;
    padding: 30px;
    margin-top: 20px;
    overflow: auto;
}


/* Align about section image to right */

.aboutimg {
    float: right;
}


/* Footer */

.footer {
    padding: 20px;
    background: #ddd;
    margin-top: 20px;
}

.copyright {
    text-align: center;
    font-size: 10px;
    padding: 5px;
}

JavaScript

function createBarChart (data) {
    // Start with the container.
    var chart = document.createElement("div");

    // The container must have position: relative.
    chart.style.position = "relative";

    // The chart's height is the value of its largest
    // data item plus a little margin.
    var height = 0;
    for (var i = 0; i < data.length; i += 1) {
        height = Math.max(height, data[i].value);
    }
    chart.style.height = (height + 10) + "px";

    // Give the chart a bottom border.
    chart.style.borderBottomStyle = "solid";
    chart.style.borderBottomWidth = "1px";

    // Iterate through the data.
    var barPosition = 0;

    // We have a preset bar width for the purposes of this
    // example.  A full-blown chart module would make this
    // customizable.
    var barWidth = 25;
    for (i = 0; i < data.length; i += 1) {
        // Basic column setup.
        var dataItem = data[i];
        var bar = document.createElement("div");
        bar.style.position = "absolute";
        bar.style.left = barPosition + "px";
        bar.style.width = barWidth + "px";
        bar.style.backgroundColor = dataItem.color;
        bar.style.height = dataItem.value + "px";
        bar.style.borderStyle = "ridge";
        bar.style.borderColor = dataItem.color;

        // Visual flair with CSS Level 3 (for maximum compatibility
        // we set multiple possible properties to the same value).
        // Hardcoded values here just for illustration; a
        // full module would allow major customizability.
        bar.style.MozBoxShadow = "rgba(128, 128, 128, 0.75) 0px 7px 12px";
        bar.style.WebkitBoxShadow = "rgba(128, 128, 128, 0.75) 0px 7px 12px";
        bar.style.boxShadow = "rgba(128, 128, 128, 0.75) 0px 7px 12px";
        bar.style.MozBorderRadiusTopleft = "8px";
        bar.style.WebkitBorderTopLeftRadius = "8px";
        bar.style.borderTopLeftRadius = "8px";
        bar.style.MozBorderRadiusTopright = "8px";
        bar.style.WebkitBorderTopRightRadius = "8px";
        bar.style.borderTopRightRadius = "8px";
        bar.style.backgroundImage =
            "-moz-linear-gradient(" + dataItem.color + ", black)";
        bar.style.backgroundImage =
            "-webkit-gradient(linear, 0% 0%, 0% 100%," +
            "color-stop(0, " + dataItem.color + "), color-stop(1, black))";
        bar.style.backgroundImage =
            "linear-gradient(" + dataItem.color + ", black)";

        // Recall that positioning properties are treated *relative*
        // to the corresponding sides of the containing element.
        bar.style.bottom = "-1px";
        chart.appendChild(bar);

        // Move to the next bar.  We provide an entire bar's
        // width as space between columns.
        barPosition += (barWidth * 2);
    }

    return chart;
};

window.onload = function () {
    var colors = [{ color: "red", value: 40 },
          { color: "blue", value: 10 },
          { color: "green", value: 100 },
          { color: "black", value: 65 },
          { color: "yellow", value: 75 },
          { color: "purple", value: 120 },
          { color: "grey", value: 121 },
          { color: "orange", value: 175 },
          { color: "olive", value: 220 },
          { color: "maroon", value: 275 },
          { color: "brown", value: 300 },
          { color: "teal", value: 15 }
    ];

    var chart = createBarChart(colors);
    document.body.appendChild(chart);
};

Answer 1

您的问题是您将其附加到主体上，因此无法使用条形图。

如果您交换以下行，它将被放入#wrapper中：

 document.body.appendChild(chart);

为此：

 document.querySelector('#wrapper').appendChild(chart);

请注意，这最好在代码段的全屏模式下看到-当图形大于较小屏幕上的包含包装时，您将需要解决溢出问题。我弹出了一个overflow-x: auto样式规则，以表明它在包装器内。

另外，您没有正确关闭脚本标签-所以我也修复了该问题。

function createBarChart (data) {
    // Start with the container.
    var chart = document.createElement("div");

    // The container must have position: relative.
    chart.style.position = "relative";

    // The chart's height is the value of its largest
    // data item plus a little margin.
    var height = 0;
    for (var i = 0; i < data.length; i += 1) {
        height = Math.max(height, data[i].value);
    }
    chart.style.height = (height + 10) + "px";

    // Give the chart a bottom border.
    chart.style.borderBottomStyle = "solid";
    chart.style.borderBottomWidth = "1px";

    // Iterate through the data.
    var barPosition = 0;

    // We have a preset bar width for the purposes of this
    // example.  A full-blown chart module would make this
    // customizable.
    var barWidth = 25;
    for (i = 0; i < data.length; i += 1) {
        // Basic column setup.
        var dataItem = data[i];
        var bar = document.createElement("div");
        bar.style.position = "absolute";
        bar.style.left = barPosition + "px";
        bar.style.width = barWidth + "px";
        bar.style.backgroundColor = dataItem.color;
        bar.style.height = dataItem.value + "px";
        bar.style.borderStyle = "ridge";
        bar.style.borderColor = dataItem.color;

        // Visual flair with CSS Level 3 (for maximum compatibility
        // we set multiple possible properties to the same value).
        // Hardcoded values here just for illustration; a
        // full module would allow major customizability.
        bar.style.MozBoxShadow = "rgba(128, 128, 128, 0.75) 0px 7px 12px";
        bar.style.WebkitBoxShadow = "rgba(128, 128, 128, 0.75) 0px 7px 12px";
        bar.style.boxShadow = "rgba(128, 128, 128, 0.75) 0px 7px 12px";
        bar.style.MozBorderRadiusTopleft = "8px";
        bar.style.WebkitBorderTopLeftRadius = "8px";
        bar.style.borderTopLeftRadius = "8px";
        bar.style.MozBorderRadiusTopright = "8px";
        bar.style.WebkitBorderTopRightRadius = "8px";
        bar.style.borderTopRightRadius = "8px";
        bar.style.backgroundImage =
            "-moz-linear-gradient(" + dataItem.color + ", black)";
        bar.style.backgroundImage =
            "-webkit-gradient(linear, 0% 0%, 0% 100%," +
            "color-stop(0, " + dataItem.color + "), color-stop(1, black))";
        bar.style.backgroundImage =
            "linear-gradient(" + dataItem.color + ", black)";

        // Recall that positioning properties are treated *relative*
        // to the corresponding sides of the containing element.
        bar.style.bottom = "-1px";
        chart.appendChild(bar);

        // Move to the next bar.  We provide an entire bar's
        // width as space between columns.
        barPosition += (barWidth * 2);
    }

    return chart;
};

window.onload = function () {
    var colors = [{ color: "red", value: 40 },
          { color: "blue", value: 10 },
          { color: "green", value: 100 },
          { color: "black", value: 65 },
          { color: "yellow", value: 75 },
          { color: "purple", value: 120 },
          { color: "grey", value: 121 },
          { color: "orange", value: 175 },
          { color: "olive", value: 220 },
          { color: "maroon", value: 275 },
          { color: "brown", value: 300 },
          { color: "teal", value: 15 }
    ];

    var chart = createBarChart(colors);
    document.querySelector("#wrapper").appendChild(chart); // I altered this line
};

#wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    border: groove; 
    border-color: white;
    padding: 2px;
    overflow-x: auto;
}

#loginwrap {
    margin-left: auto;
    margin-right: auto;
    padding: 3px;
    text-align: center;
}

body {
    font-family: Georgia;
    padding: 10px;
    background: #f1f1f1;
    font-weight: bold;
}


/* top navigation bar */

.topnav {
    overflow: hidden;
    background-color: #333;
}


/* topnav links */

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}


/* Change color on hover */

.topnav a:hover {
    background-color: #ddd;
    color: black;
}


/* three columns next to each other */

.column1 {
    float: left;
    width: 30%;
    padding: 15px;
    height: 300px;
    text-align: center;
    background-color: #aaa;
}

.column2 {
    float: left;
    width: 30%;
    padding: 15px;
    height: 300px;
    text-align: center;
    background-color: #bbb;
}

.column3 {
    float: left;
    width: 30%;
    padding: 15px;
    height: 300px;
    text-align: center;
    background-color: #aaa;
}


/* Clear floats after the columns */

.row:after {
    content: "";
    display: table;
    clear: both;
}


/* Card-like background for each section */

.card {
    background-color: white;
    padding: 30px;
    margin-top: 20px;
    overflow: auto;
}


/* Align about section image to right */

.aboutimg {
    float: right;
}


/* Footer */

.footer {
    padding: 20px;
    background: #ddd;
    margin-top: 20px;
}

.copyright {
    text-align: center;
    font-size: 10px;
    padding: 5px;
}

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Test</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="description" content="Issue Tracking System"/>
      <meta name="author" content="Stephen Morris">
      <link rel="stylesheet" type="text/css" href="tissue.css">
   </head>
   <body>
      <div id="wrapper">
         <h2>Test</h2>
         <div class="topnav">
            <a href="index.html">Home</a>
            <a href="Login.html">Login</a>
         </div>
         <div>
            <h2>Sales Subscription Dashboard</h2>

         </div>
      </div>
      <div class="copyright">
         Copyright &copy; 2018 
      </div>
      <script src="js/subscriptions_graph.js"></script>
   </body>
</html>

如何将JavaScript生成的div元素放置在主体div元素内

1 个答案: