javascript - 过滤标签以从 Chart.js 显示用户

Question

我正在开发一个 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>

这是我的图表.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; ?>],
                borderWidht: 6,
                borderColor: 'blue',
                backgroundColor: 'transparent'
              },
              {
                label: "Corrente 3",
                data: [<?php echo $datacor3; ?>],
                borderWidht: 6,
                borderColor: 'green',
                backgroundColor: 'transparent'
              },
              {
                label: "Corrente Total",
                data: [<?php echo $datatotcor; ?>],
                borderWidht: 6,
                borderColor: 'black',
                backgroundColor: 'transparent'
              },
            ]            
          },
          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
          }
      });
    }

Answer 1

您应该将数据保存在变量中，循环访问数据以获得正确的数组条目，并将所需的所有数据应用于图表并更新它。

我只能给你这个没有代码的通用解决方案，因为在我已经在回答你的另一个问题时指出我不认为你有一个好的数据结构之后，我不想再次分析你的代码。