【发布时间】：2020-04-27 15:11:07
【问题描述】：
有人可以帮我写代码吗？我是一个新手程序员。我制作了一个网络来监控某些东西。目前的数据监控仍然是一个虚拟数据。数据位于 API http://66.42.52.94:8000/api/data/ 上。所以我必须在图表上显示很多传感器数据（它们是：accelero_x、accelero_y、accelero_z、振动、湿度、gyro_x、gyro_y、gyro_z、位移）。这是显示加速度传感器x轴图表的代码。
js文件代码：
$(document).ready(function(){
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd'
});
$("#firstdatepicker").datepicker();
$("#lastdatepicker").datepicker();
$("#filter").click(function() {
var from_date = $("#firstdatepicker").val();
var to_date = $("#lastdatepicker").val();
if (from_date != '' && to_date != '') {
console.log(from_date, to_date);
var endpoint = '/api/data';
$.ajax({
method: "GET",
url: endpoint,
data: {
from_date: from_date,
to_date: to_date
},
success: function(data){
console.log(data); //get all data
//get data by fields
var accelero_x = [], time = [];
for (var i=0; i<data.length; i++){
accelero_x.push(data[i].accelero_x);
time.push(data[i].timestamp);
}
console.log(accelero_x);
console.log(time);
//plot the chart
var ctx = document.getElementById("acceleroxChart").getContext('2d');
var acceleroxChart = new Chart(ctx, {
type: 'line',
data: {
labels: time,
datasets: [{
label: 'Accelero-x (mV/g)',
data: accelero_x,
fill: false,
borderColor: "#80b6f4",
pointBorderColor: "#80b6f4",
pointBackgroundColor: "#80b6f4",
pointHoverBackgroundColor: "#80b6f4",
pointHoverBorderColor: "#80b6f4",
pointBorderWidth: 10,
pointHoverRadius: 10,
pointHoverBorderWidth: 1,
pointRadius: 1,
borderWidth: 4,
}]
},
options: {
reponsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero:false,
stepSize:0.5
},
scaleLabel: {
display: true,
labelString: 'Accelero sb.x (mV/g)'
}
}],
xAxes: [{
display: true,
type: "time",
time: {
minUnit: "hour",
unit: "hour",
unitStepSize: 6,
min: moment(from_date).toDate(),//Date object type
max: moment(to_date).toDate()//Date object type
},
scaleLabel: {
display: true,
labelString: 'Time'
}
}]
}
}
});
},
error: function(error_data){
console.log(error_data)
}
});
} else {
alert("Please Select Date");
}
});
});
html代码：
{% extends 'base.html' %}
{% load static %}
{% block content %}
<!-- Begin Page Content -->
<div class="container-fluid">
<!--card header-->
<div class="card-header">
<h6 class="m-0 font-weight-bold text-primary">Accelero X-axes</h6>
<!--Breadcrumbs-->
<ol class="breadcrumb">
<li style="margin-left: 10px">
data from <input type="text" id="firstdatepicker" name="firstdatepicker" value="2020-03-15">
to <input type="text" id="lastdatepicker" name="lastdatepicker" value="2020-03-16">
<input type="button" name="filter" id="filter" value="Filter" class="btn btn-info">
</li>
</ol>
<!--End of breadcrumbs date picker-->
<!--Kelembaban tanah Area Chart-->
<div class="card-body">
<div class="chart-area">
<canvas id="acceleroxChart"></canvas>
</div>
</div> <!--end of area chart-->
</div> <!--end of card header-->
</div>
<!--end of page content (container-fluid) -->
</div>
<!-- End of Main Content -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Page level chart.js yang digunakan halaman ini-->
<script src="{% static 'js/demo/accelero-x.js' %}"></script>
<!-- <script src="{% static 'js/demo/chart-pie-demo.js' %}"></script> -->
<!-- date picker js-->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery.ui.datepicker.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<!--buat kalender-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/sunny/jquery-ui.min.css"></link>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css"></link>
{% endblock content %}
因此，时间图表的 x 轴和传感器数据图表的 y 轴。数据可以通过我选择的日期过滤器过滤：
这些代码仅在一个网页上显示加速度传感器 x 轴的图表。问题是我想在一个页面上显示每个传感器的所有图表（所以到最后会有 9 个图表），所有图表只有一个日期过滤器。有人可以帮我写代码吗？之前谢谢你。
【问题讨论】：
标签： javascript html chart.js datefilter