4

我正在开发一个 Chart.js 项目，在它上面，我会有一堆数据。如果用户想查看特定日期，例如：（10/10/2019），我想获取该特定日期的所有数据，显示给他，当他清除输入时，它将恢复正常状态。目前我不知道该怎么做，我考虑搜索图表标签，但没有成功。 这是我的图表的图像。

这是我的按钮方法：

 <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; ?>],
                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
          }
      });
    }
4

1 回答 1

0

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

我只能在没有代码的情况下为您提供这个通用解决方案，因为在我已经在回答您的另一个问题时表示我认为您没有良好的数据结构之后，我不想再次分析您的代码。

于 2019-11-11T09:08:50.653 回答