如何在一个网页上为多个图表创建一个日期过滤器？

Question

有人可以帮助我提供代码吗？我是新手程序员。我制作了一个网络来监视某些内容。现在，数据监视仍然是虚拟数据。数据在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/[email protected]/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轴表示传感器数据。数据可以通过我这样选择的datefilter进行过滤：

这些代码仅在一个网页上显示加速度传感器x轴的图表。问题是我想在一个页面上显示每个传感器的所有图表（因此到最后将有9个图表），并且所有图表都只有一个datefilter。有人可以帮助我提供代码吗？谢谢你。

Answer 1

我解决了！不需要任何特殊代码。只需将其他图表调用到html部分即可。无需迭代html上的面包屑部分。

<div class="card-body">
  <div class="chart-area">
      <canvas id="acceleroxChart"></canvas>
  </div>
</div> <!--end of area chart-->
<br>
<h2>Chart2</h2>
<br>
<div class="card-body">
  <div class="chart-area">
      <canvas id="theotherchartname"></canvas>
  </div>
</div>
.........and so on....

对于其他图表传感器，您仍然可以使用与上述js文件相同的结构代码，只需更改所需的数据。