我正在制作一个网站，该网站具有显示员工总工作时间的功能。我想这样做，当它显示总工作时间时，它也会显示当月每天的工作时间。我设法做了图表，但图表会显示在另一页上，那么我该如何显示图表和在同一页上工作的总小时数？
代码：
def checkTotalHours(response):
empName = employeeName.objects.all()
if response.method == "POST":
if 'checkName' in response.POST:
n = response.POST.get("check")
emp = employeeName.objects.get(employee=n)
time = emp.total_Hours_Worked
messages.info(response, time + ' hours')
f = Name.objects.filter(name=emp)
allDate = []
cIn = []
today = datetime.today()
datem = today.month
for date in f:
allDate.append(date.date)
totalTime = (datetime.combine(date.date, date.timeOut)- datetime.combine(date.date, date.timeIn)).seconds/3600
cIn.append(totalTime)
hours = int(totalTime)
minutes = (totalTime*60) % 60
seconds = (totalTime*3600) % 60
time = "%d:%02d:%02d" % (hours, minutes, seconds)
#cIn.append(time)
global cInUpdated
global allDateUpdated
cInUpdated = []
allDateUpdated = []
for item in range(len(allDate)):
if allDate[item].month == datem:
cInUpdated.append(cIn[item])
allDateUpdated.append(allDate[item])
print("Here:: ", allDate[item].month," ", cIn[item] )
else:
continue
for item in range(len(cInUpdated)):
print("Work: ", allDateUpdated[item], " ",cInUpdated[item])
return redirect('/totalHours')
else:
form = CreateNewList()
return render(response, "main/checkTotalHours.html", {"empName":empName})
HTML:
{% extends 'main/base.html' %}
{% block title %}Filter{% endblock %}
{% block content %}
<h1 class="p1">Filter</h1>
<hr class="mt-0 mb-4">
<h2 class="p2">by Total Hours Worked</h3>
<div class="pad">
<form method="post">
{% csrf_token %}
<div class="input-group mb-2">
<div class="input-group-prepend">
<input list="check" name="check" placeholder="enter name...">
<datalist id="check">
{% for empName in empName %}
<option value="{{empName.employee}}">
{% endfor %}
</datalist>
<button type="submit" name="checkName" value="checkName" class="button2" id="example2">Check</button>
</div>
</div>
</form>
</div>
{% for message in messages %}
<div class="container-fluid p-0">
<div class="alert {{ message.tags }} alert-info" role="alert" >
{{ message }}
</div>
</div>
{% endfor %}
{% endblock %}
我在另一个页面上用这个代码实现了chart.js
class HomeView(View):
def get(self, request, *args, **kwargs):
return render(request, 'main/index.html')
class ChartData(APIView):
def get(self, request, format = None):
chartLabel = allDateUpdated
chartdata = cInUpdated
data ={
"labels":allDateUpdated,
"chartLabel":chartLabel,
"chartdata":chartdata,
}
return Response(data)
图形的HTML：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>chatsjs</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body class="container-fluid">
<center class="row">
<h1>implementation of <b>chartJS</b> using <b>django</b></h1>
</center>
<hr />
<div class="row">
<div class="col-md-6">
<canvas id="myChartline"></canvas>
</div>
<div class="col-md-6">
<canvas id="myChartBar"></canvas>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script>
var endpoint = '/api';
$.ajax({
method: "GET",
url: endpoint,
success: function(data) {
drawLineGraph(data, 'myChartline');
drawBarGraph(data, 'myChartBar');
console.log("drawing");
},
error: function(error_data) {
console.log(error_data);
}
})
function drawLineGraph(data, id) {
var labels = data.labels;
var chartLabel = data.chartLabel;
var chartdata = data.chartdata;
var ctx = document.getElementById(id).getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: labels,
datasets: [{
label: chartLabel,
backgroundColor: 'rgb(255, 100, 200)',
borderColor: 'rgb(55, 99, 132)',
data: chartdata,
}]
},
// Configuration options go here
options: {
scales: {
xAxes: [{
display: true
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
function drawBarGraph(data, id) {
var labels = data.labels;
var chartLabel = data.chartLabel;
var chartdata = data.chartdata;
var ctx = document.getElementById(id).getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: chartLabel,
data: chartdata,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Time'
}
}]
}
}
});
}
</script>
</body>
</html>
我想知道如何使两者都显示在一页中？
urls:
path("totalHours/", views.checkTotalHours, name="totalHours"),
path('api/', views.ChartData.as_view()),
path('chart/', views.HomeView.as_view(), name = "chart")
您只需要组合两个模板的代码。如果需要，可以通过在<style></style>标记中添加值，通过模板将数据传递给JS。除了真的没有什么需要做的。。。