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

时间:2019-05-02 09:00:09

标签: javascript charts

我有一个用chart.js创建的折线图:

$sudo chown ec2-user:ec2-user /var/www/html/

我用秒传递此功能,以便稍后及时转换它们:

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'
        }
      }]
    }
  }
};

它工作正常,我现在面临的唯一问题是工具提示中的秒仍然是秒。有什么办法可以将其转换为时间?这里正在工作fiddle

1 个答案:

答案 0 :(得分:2)

您可以在其回调函数中以工具提示格式进行更改,在下面可以找到非常基本的示例:

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

使用工具提示选项替换它。我已经更新了您的fiddle,您可以根据需要使用它并更新功能。