我正在研究Chart.js项目，在其中，我将拥有大量数据。如果用户想查看特定日期，例如：（10/10/2019），我想获取该特定日期的所有数据，并显示给他，当他清除输入时，它将返回到其正常状态。目前，我还不知道该怎么做，我想寻找图表标签，但没有成功。 Here是我的图表的图像。

这是我的按钮方法：

 <div class="chart1">
      <canvas id="mychart1" ></canvas>
      <form method="post">
        <p class="datafilter">Filtrar data:<input type="date" id="datafilter">
        <button type="submit" id="subfilt">FILTRAR</button></p>
      </form>
 </div>

这是我的chart.js：

<script>
    chartIt();

    async function chartIt(){
      var lbl = [<?php echo $labels; ?>];
      var ctx1 = document.getElementById('mychart1');

      var myLineChart = new Chart(ctx1,{
          type: 'line',data: {
            labels: lbl,datasets: [
              {
                label: "Corrente 1",data: [<?php echo $datacor1;?>],borderWidht: 6,borderColor: 'red',backgroundColor: 'transparent'
              },{
                label: "Corrente 2",data: [<?php echo $datacor2; ?>],borderColor: 'blue',{
                label: "Corrente 3",data: [<?php echo $datacor3; ?>],borderColor: 'green',{
                label: "Corrente Total",data: [<?php echo $datatotcor; ?>],borderColor: 'black',]            
          },plugins: [

          ],options: {
            scales: {
              yAxes: [{
                ticks: {
                  beginAtZero: true
                }
              }],xAxes: [{
                gridLines: {
                  display: false
                }
              }]
            },title: {
              display: true,fontSize: 20,text: "Gráfico das Correntes"
            },labels: {
              fontStyle: "bold",},layout: {
              padding: {
                left: 0,right: 0,top: 0,bottom: 0
              }
            },tooltips: {
              enabled: true,mode: 'single',responsive: true,backgroundColor: 'black',titleFontFamily: "'Arial'",titleFontSize: 14,titleFontStyle: 'bold',titleAlign: 'center',titleSpacing: 4,titleMarginBottom: 10,bodyFontFamily: "'Mukta'",bodyFontSize: 14,borderWidth: 2,borderColor: 'grey',callbacks:{
                title: function(tooltipItem,data) {
                    return data.labels[tooltipItem[0].index];
                },afterTitle: function(tooltipItem,data) {
                  var date = <?php echo json_encode($tempo) ?>

                  return date[tooltipItem[0]['index']]; 
                },label: function(tooltipItem,data) {
                      var label = data.datasets[tooltipItem.datasetIndex].label || '';                  
                      if (label) {
                          label += ': ';
                      }
                      label += (tooltipItem.yLabel)+"A";                  
                      return label;
                }
              }
            },aspectRatio: 1,maintainAspectRatio: false
          }
      });
    }