我需要在条形图中显示 HTML/Js 页面的 Div 结果吗？

Question

我需要在条形图中显示下面提到的代码的结果。是否可以在条形图中显示下面代码的结果以进行调查？所以我按照几个伙伴的建议把代码放在这里。你可以看到在代码中，我正在打印调查结果，但我也想显示蜘蛛图，但我不知道如何继续。

You can check code in this question

js文件：-

function displayRadioValue() {

let section1 = document.querySelectorAll('.section-1 > input[type="radio"]')
let section2 = document.querySelectorAll('.section-2 > input[type="radio"]')
let section1Total = 0
let section2Total = 0
let section1Question = 0
let section2Question = 0
let finalResults = document.querySelector('.final-results')
let result1 = ''
let result2 = ''
finalResults.innerHTML = ''

//Section 1
section1.forEach(function(radio, index) {
if (radio.checked) {
  section2Question++
  section1Total += +radio.value
 }
})

//Section 2
section2.forEach(function(radio, index) {
if (radio.checked) {
  section1Question++
  section2Total += +radio.value
}
})

//Final Results and validation
if (section1Total > 0 && section2Total > 0) {
finalResults.innerHTML += genTable(section1Question, section1Total, 1)
finalResults.innerHTML += genTable(section2Question, section2Total, 2)
} else {
finalResults.innerHTML = 'Snap! Please select the atleast one survey   question from each section '}
document.getElementById("control").style.display = "block";
document.getElementById("toemail").href +=   document.getElementById("final-results").innerText;

}

HTML 文件：-

<p>
Select a radio button and click on Submit.
</p>
<div class="section-1">

<h2>Section 1</h2>
question 1:
<input type="radio" name="question1" value="1">1
<input type="radio" name="question1" value="2">2
<input type="radio" name="question1" value="3">3

<br> question 2:
<input type="radio" name="question2" value="1">1
<input type="radio" name="question2" value="2">2
<input type="radio" name="question2" value="3">3

<br> question 3:
<input type="radio" name="question3" value="1">1
<input type="radio" name="question3" value="2">2
<input type="radio" name="question3" value="3">3

</div>
<div class="section-2">

<h2>Section 2</h2>
question 1:
<input type="radio" name="question4" value="1">1
<input type="radio" name="question4" value="2">2
<input type="radio" name="question4" value="3">3

<br> question 2:
<input type="radio" name="question5" value="1">1
<input type="radio" name="question5" value="2">2
<input type="radio" name="question5" value="3">3
<br> question 3:
<input type="radio" name="question6" value="1">1
<input type="radio" name="question6" value="2">2
<input type="radio" name="question6" value="3">3
<br> question 4:
<input type="radio" name="question7" value="1">1
<input type="radio" name="question7" value="2">2
<input type="radio" name="question7" value="3">3
</div>
<br>

<div class="final-results"></div>
<br>

<button type="button" onclick="displayRadioValue()">
  Submit
 </button>

 <div id="control" style="display: none"><a id="toemail"  href="mailto:youremail@domain.com?subject=Survey response&body=">Send to   
  email</a>&nbsp<button onclick="window.print();">Send to PDF</button>.  </div>

css 文件：-

@media print {
body * {
visibility: hidden;
 }
.final-results * {
visibility: visible;
 }
 .final-results {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
 }
}

table,
 table tr th,
table tr td {
 border: 1px solid black;
 }

Answer 1

这是为您工作的简单条形图。您可以使用chartJS 库来实现您所追求的results。

首先，我们需要define 图表options 并在那些options 中加载来自results 的数据dynamically。

我制作了两个sections，其中还显示了每个部分的总得分和百分比。 Bar Chart 将出现在最终结果表的正下方

当您点击显示结果 button 时，chart 数据将根据结果和问题分数进行相应更改。该图表也会出现在您的PDF 中。

现场演示：

function displayRadioValue() {
  let section1 = document.querySelectorAll('.section-1 > input[type="radio"]')
  let section2 = document.querySelectorAll('.section-2 > input[type="radio"]')
  let fullName = document.querySelector('#fullName').value
  let email = document.querySelector('#email').value
  let age = document.querySelector('#age').value
  var ctx = document.querySelector('#resultsChart').getContext('2d');
  let section1Total = 0
  let section2Total = 0
  let section1Question = 0
  let section2Question = 0
  let finalResults = document.querySelector('.final-results')
  let result1 = ''
  let result2 = ''
  finalResults.innerHTML = ''

  //Section 1
  section1.forEach(function(radio, index) {
    if (radio.checked) {
      section2Question++
      section1Total += +radio.value
    }
  })

  //Section 2
  section2.forEach(function(radio, index) {
    if (radio.checked) {
      section1Question++
      section2Total += +radio.value
    }
  })

  var options = {
    type: 'bar',
    data: {
      labels: ["Section 1", "Section 2"],
      datasets: [{
          label: 'Total Scored',
          data: [section1Question, section2Question, 30],
          backgroundColor: '#E91E63',
          borderWidth: 1
        },
        {
          label: 'Percentage %',
          data: [((section1Total / (section1Question * 3)) * 100).toFixed(2), ((section2Total / (section2Question * 3)) * 100).toFixed(2), 30],
          backgroundColor: '#004D40',
          borderWidth: 1
        }
      ]
    },
    options: {
      scales: {
        responsive: true,
        yAxes: [{
          ticks: {
            reverse: false
          }
        }]
      }
    }
  }

  //Final Results and validation
  if (fullName.value != '' && email.value != '' && age.value != '') {
    if (section1Total > 0 && section2Total > 0) {
      finalResults.innerHTML += genDetails(fullName, email, age)
      finalResults.innerHTML += "<h2>Results</h2>"
      finalResults.innerHTML += genTable(section1Question, section1Total, 1)
      finalResults.innerHTML += genTable(section2Question, section2Total, 2)
      finalResults.innerHTML += "<h2>Chart Results</h2>"
      document.getElementById("control").style.display = "block";
      document.getElementById("resultsChart").style.display = "block";
      document.getElementById("toemail").href += document.querySelector(".final-results").innerText;
      new Chart(ctx, options); //show chart
    } else {
      finalResults.innerHTML = 'Snap! Please select the atleast one survey question from each section '
    }
  } else {
    finalResults.innerHTML = 'Snap! Please enter your name, emial, age in the first section '
  }
}

function genDetails(name, email, age) {
  var result = "<h2>Personal Info</h2>"
  result += "<b>Full name:</b> <span>" + name + "</span><br>"
  result += "<b>Email name:</b> <span>" + email + "</span><br>"
  result += "<b>Age: </b> <span>" + age + "</span><br>"
  return result
}

function genTable(ques, total, section) {
  var result = "<b>Section " + section + ":</b><br>"
  var tr = "<tr><th>" + total + "</th><th>" + ((total / (ques * 3)) * 100).toFixed(2) + "</th></tr>"
  result += "<table><thead><tr><th>Total Score</th><th>Percentage</th></tr></thead><tbody>" + tr + "</tbody></table>"
  return result
}

canvas {
  display: none
}

@media print {
  body * {
    visibility: hidden;
  }
  canvas {
    visibility: visible;
    margin-top: 30%;
  }
  .form-control {
    visibility: visible;
  }
  .final-results * {
    visibility: visible;
  }
  .final-results,
  .form-control {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
}

table,
table tr th,
table tr td {
  border: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Survey Question</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous"></script>
</head>

<body>
  <section class="container py-4">
    <div class="row">
      <div class="col-md-12">
        <h2>Survey</h2>
        <ul id="tabs" class="nav nav-tabs">
          <li class="nav-item"><a href="" data-target="#personalInfo" data-toggle="tab" class="nav-link small text-uppercase active">Personal Info</a></li>
          <li class="nav-item"><a href="" data-target="#section1" data-toggle="tab" class="nav-link small text-uppercase">Section 1</a></li>
          <li class="nav-item"><a href="" data-target="#section2" data-toggle="tab" class="nav-link small text-uppercase">Section 2</a></li>
          <li class="nav-item"><a href="" data-target="#results" data-toggle="tab" class="nav-link small text-uppercase">Results</a></li>
        </ul>
        <br>
        <div id="tabsContent" class="tab-content">
          <div id="personalInfo" class="tab-pane fade active show">
            <div class="form-group">
              <label for="fullName">Full Name address</label>
              <input type="email" class="form-control" id="fullName" aria-describedby="nameHelp" placeholder="Enter full name">
              <small id="nameHelp" class="form-text text-muted">Please enter your full name.</small>
            </div>
            <div class="form-group">
              <label for="email">Email address</label>
              <input type="email" class="form-control" id="email" aria-describedby="email" placeholder="Enter email">
              <small id="email" class="form-text text-muted">Please enter your valid email address.</small>
            </div>
            <div class="form-group">
              <label for="age">Password</label>
              <input type="number" class="form-control" id="age" aria-describedby="age" placeholder="Age">
              <small id="age" class="form-text text-muted">Please enter your age in number.</small>
            </div>
          </div>
          <div id="section1" class="tab-pane fade">
            <div class="section-1-questions">
              <fieldset class="form-group">
                <div class="row">
                  <legend class="col-form-label col-sm-2 pt-0">Question 1:</legend>
                  <div class="col-sm-10">
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question1" id="gridRadios1" value="1">
                      <label class="form-check-label" for="gridRadios1">
                              1
                            </label>
                    </div>
                    <div class="form-check section-1">
                      <input class="form-check-input " type="radio" name="question1" id="gridRadios2" value="2">
                      <label class="form-check-label" for="gridRadios2">
                              2
                            </label>
                    </div>
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question1" id="gridRadios3" value="3">
                      <label class="form-check-label" for="gridRadios3">
                              3
                            </label>
                    </div>
                  </div>
                </div>
              </fieldset>
              <fieldset class="form-group">
                <div class="row">
                  <legend class="col-form-label col-sm-2 pt-0">Question 2:</legend>
                  <div class="col-sm-10">
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question2" id="gridRadios4" value="1">
                      <label class="form-check-label" for="gridRadios4">
                              1
                            </label>
                    </div>
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question2" id="gridRadios5" value="2">
                      <label class="form-check-label" for="gridRadios5">
                              2
                            </label>
                    </div>
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question2" id="gridRadios6" value="3">
                      <label class="form-check-label" for="gridRadios6">
                              3
                            </label>
                    </div>
                  </div>
                </div>
              </fieldset>
              <fieldset class="form-group">
                <div class="row">
                  <legend class="col-form-label col-sm-2 pt-0">Question 3:</legend>
                  <div class="col-sm-10">
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question3" id="gridRadios7" value="1">
                      <label class="form-check-label" for="gridRadios7">
                              1
                            </label>
                    </div>
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question3" id="gridRadios8" value="2">
                      <label class="form-check-label" for="gridRadios8">
                              2
                            </label>
                    </div>
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question3" id="gridRadios9" value="3">
                      <label class="form-check-label" for="gridRadios9">
                              3
                            </label>
                    </div>
                  </div>
                </div>
              </fieldset>
            </div>
          </div>
          <div id="section2" class="tab-pane fade">
            <div class="section-2-question">
              <fieldset class="form-group">
                <div class="row">
                  <legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
                  <div class="col-sm-10">
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question4" id="gridRadios10" value="1">
                      <label class="form-check-label" for="gridRadios10">
                              1
                            </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question4" id="gridRadios11" value="2">
                      <label class="form-check-label" for="gridRadios11">
                              2
                            </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question4" id="gridRadios12" value="3">
                      <label class="form-check-label" for="gridRadios12">
                              3
                            </label>
                    </div>
                  </div>
                </div>
              </fieldset>
              <fieldset class="form-group">
                <div class="row">
                  <legend class="col-form-label col-sm-2 pt-0">Question 5:</legend>
                  <div class="col-sm-10">
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question5" id="gridRadios13" value="1">
                      <label class="form-check-label" for="gridRadios13">
                              1
                            </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question5" id="gridRadios14" value="2">
                      <label class="form-check-label" for="gridRadios14">
                              2
                            </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question5" id="gridRadios15" value="3">
                      <label class="form-check-label" for="gridRadios15">
                              3
                            </label>
                    </div>
                  </div>
                </div>
              </fieldset>
              <fieldset class="form-group">
                <div class="row">
                  <legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
                  <div class="col-sm-10">
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question6" id="gridRadios16" value="1">
                      <label class="form-check-label" for="gridRadios16">
                              1
                            </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question6" id="gridRadios17" value="2">
                      <label class="form-check-label" for="gridRadios17">
                              2
                            </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question6" id="gridRadios18" value="3">
                      <label class="form-check-label" for="gridRadios18">
                              3
                            </label>
                    </div>
                  </div>
                </div>
              </fieldset>
              <fieldset class="form-group">
                <div class="row">
                  <legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
                  <div class="col-sm-10">
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question7" id="gridRadios19" value="1">
                      <label class="form-check-label" for="gridRadios19">
                              1
                            </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question7" id="gridRadios20" value="2">
                      <label class="form-check-label" for="gridRadios20">
                              2
                            </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question7" id="gridRadios21" value="3">
                      <label class="form-check-label" for="gridRadios21">
                              3
                            </label>
                    </div>
                  </div>
                </div>
              </fieldset>
            </div>
          </div>
          <div id="results" class="tab-pane fade">
            <div class="final-results"></div>
            <br>
            <canvas id="resultsChart"></canvas>
            <br>
            <button type="button" class="btn btn-success" onclick="displayRadioValue()">
                        Show Results
                    </button>
            <br>
            <br>
            <div id="control" style="display: none">
              <a id="toemail" class="btn btn-link" href="mailto:youremail@domain.com?subject=Survey response&body=">Send to
                        email</a>&nbsp;<button onclick="window.print();" class="btn btn-warning">Send to PDF</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>

</html>