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

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;

更新:

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

Answer 1

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

var date = <?php echo json_encode($yourVariabel) ?>
//In my case:
var date = <?php echo json_encode($tempo) ?>

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

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;
                }
              }
            },