我需要在条形图中显示HTML/Js页面的Div结果吗? [英] I need to show Div result of HTML/Js page in bar chart?
本文介绍了我需要在条形图中显示HTML/Js页面的Div结果吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要在条形图中显示下面提到的代码的结果.是否可以在条形图中显示以下代码的结果以供调查?所以我按照一些伴侣的建议将代码放在这里.在代码中，我正在打印调查结果，但是我也想显示蜘蛛图，但是我不知道如何进行.
I need to show the result of below mention code in bar chart.Is it possible to show the result of below code for survey to show in bar chart ?So i put the code here as suggested by few mate.You can see in code i am printing survey result but what i wanted to show the spider chart also but i am not know how to proceed.
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> <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;
}
推荐答案
此处为您提供了简单的条形图.您可以使用 chartJS 库来实现您追求的results
Here is working simple bar chart for you. You can use chartJS library to achieve the results you are after.
首先，我们需要define图表options，在那些options中，您可以加载来自results的数据dynamically.
First, we need to define the chart options and in those options you can load your data dynamically which come from the results.
我制作了两个sections，它们分别显示每个部分的总得分和百分比. Bar Chart将出现在最终结果表的下方
I have made two sections which show Total Scored and Percentage of each section as well. The Bar Chart will appear just below the final-results table
当您点击显示结果 button时，chart数据将相应地更改为结果和问题分数.该图表也会出现在您的PDF中.
The chart data will change accordingly to the results and question scores when you click on Show Results button. The chart also appears in your PDF as well.
实时演示:
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> <button onclick="window.print();" class="btn btn-warning">Send to PDF</button>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
这篇关于我需要在条形图中显示HTML/Js页面的Div结果吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
