javascript - 在工具提示中将秒转换为时间

Question

我用 chart.js 创建了折线图:

var config = {
  type: 'line',
  data: {
    labels: ["01/04/2019", "02/04/2019", "03/04/2019", "04/04/2019", "05/04/2019", "06/04/2019", "07/04/2019"],
    datasets: [{
      label: "Time in",
      backgroundColor: chartColors.red,
      borderColor: chartColors.red,
      data: [ 25500, 25900, 26500, 28000, 30000, 25500, 25900],
      fill: false,
    }, {
      label: "Time out",
      fill: false,
      backgroundColor: chartColors.blue,
      borderColor: chartColors.blue,
      data: [64800, 64950, 65000, 66000, 64800, 64800, 64950],
    }]
  },
  options: {
    showLines: false,
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js Line Chart'
    },
    tooltips: {
      mode: 'label',
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Date'
        }
      }],
      yAxes: [{
        display: true,

        ticks: {
          min: 0,
          reverse: true,
          userCallback: function(v) { return epoch_to_hh_mm_ss(v) },
          stepSize: 30 * 120
        },
        scaleLabel: {
          display: true,
          labelString: 'Time'
        }
      }]
    }
  }
};

我通过秒来稍后使用此功能及时转换它们:

function epoch_to_hh_mm_ss(epoch) {
  return new Date(epoch*1000).toISOString().substr(11, 5)
}

它工作正常，我现在面临的唯一问题是工具提示中的秒数仍然是秒数。有什么办法可以把它转换成时间吗？这里正在工作 fiddle

Answer 1

您可以在其回调函数中更改工具提示格式，下面是最基本的示例:

tooltips: {
      callbacks: {
                label: function(tooltipItem, data) {
                  return 'Time: '+ new Date(tooltipItem.yLabel*1000).toISOString().substr(11, 5) 
                }
            }
    }

将其替换为您的工具提示选项。我已经更新了你的 fiddle ，您可以使用它并根据您的要求更新功能。