遍历每个工具提示以添加不同的时间戳记

Question

第一项：第二项：

您可以看到图表中所圈出的部分，这不是同一个小时。我试图遍历我的工具提示以向每个工具提示打印不同的日期，我尝试了遍历，但似乎不起作用，这是我尝试过的：

tooltips: {
  callbacks: {
    title: function(tooltipItem, data) {
      return data.labels[tooltipItem[0].index];
    },
    //Problem probably here:
    afterTitle: function(tooltipItem, data) {
      if (data.labels[tooltipItem[0].index]) {
        return '<?php print_r($tempo[$mudarHorario][0]); $mudarHorario++;?>';
      }
    },
    label: function(tooltipItem, data) {
      var label = data.datasets[tooltipItem.datasetIndex].label || '';
      if (label) {
        label += ': ';
      }
      label += (tooltipItem.yLabel);
      return label;
    }
  }
}

这是我从数据库中收集日期的一部分，因此您可以看一下：

if ($resultCheck > 0) {
  while ($row = mysqli_fetch_assoc($result)) {
    $horario = (date('H:i:s', strtotime(str_replace('.', '-', $row['dias']))));

    $tempo[] = explode(',', $horario);

    $geral = $geral.
    '"'.(date('d/m/y', strtotime(str_replace('.', '-', $row['dias'])))).
    '",';
  }
}

$labels = trim($geral, ",");
$mudarHorario = 0;

更新：

我可以使数据正确显示，我尝试添加一个循环，以便可以更改日期，但是我不知道如何访问每个标签来更改DateTime。这是图表的最低版本，您可以尝试在此示例中。由于while循环，因此标签不会显示，链接：Chart example

Answer 1

查阅了一些文档并寻求有关数组的帮助，并遇到了这个非常简单的解决方案：将PHP数组传递给javascript数组：

var date = <?php echo json_encode($yourVariabel) ?>

这是将值打印到每个标签的方法：

tooltips: {
              enabled: true, //Add this true
              mode: 'single', //Add this single
              callbacks:{
//Dont need this title stuf if dont want to
                title: function(tooltipItem, data) {
                    return data.labels[tooltipItem[0].index];
                },
//This is the good part:
                afterTitle: function(tooltipItem, data) {
                  var date = <?php echo json_encode($tempo) ?>

                  return date[tooltipItem[0]['index']]; 
                },
//Dont need this title stuf if dont want to
                label: function(tooltipItem, data) {
                      var label = data.datasets[tooltipItem.datasetIndex].label || '';                  
                      if (label) {
                          label += ': ';
                      }
                      label += (tooltipItem.yLabel)+"A";                  
                      return label;
                }
              }
            },