在垂直轴chart.js中插入小时分钟和秒

Question

我正在尝试创建一个图表来表示数据库中每次运行的时间。我无法以 HH:mm:ss 格式插入时间，但我在第二秒内创建了一个转换图表。现在我想以 HH:mm:ss 格式查看时间

 let arrtempi= ["00:21:30","01:33:40","00:00:16","00:24:30","00:23:30","00:00:20","00:01:00","00:01:00","00:00:17","00:00:17","00:00:14","00:00:14","00:00:14","00:00:10","00:00:16","00:00:17","00:00:19","00:00:18","00:35:20","00:35:20"];
let arrDate=["2023-06-13","2023-04-29","2023-06-13","2023-07-03","2023-07-11","2023-07-12","2023-07-27","2023-07-27","2023-07-27","2023-07-27","2023-07-28","2023-07-28","2023-07-28","2023-07-27","2023-07-20","2023-07-28","2023-07-28","2023-07-20","2023-08-08","2023-08-08"];
function mostraGrafico(){
   arrtempiSec = arrtempi.map(function (e) {
        e = e.split(":");
        e = e[0] * 3600 + e[1] * 60 + e[2];
        return e;
      });
      new Chart(idgTempoSforzo, {
        type: "line",
        data: {
          labels: arrdate,
          datasets: [
            {
              data: arrtempiSec,
              borderColor: "green",
              fill: false,
              pointRadius: 4,
            },
          ],
          labels :arrdate,
        },

        options: {
          responsive: true,
          legend: { display: false },
          scales: {
            y: {
              callback: arrtempi,
              text: "Tempo",
            },
            y1: {
              type: "linear",
              display: true,
              position: "right",

              
            },
          },
        },
      });

}

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="gTempoSforzo" onload="mostraGrafico()"></canvas>

<-- end snippet -->

请帮忙 这是问题的链接 https://run.plnkr.co/preview/cll2drvr4000c356x7gam1uof/

Answer 1

首先，我已经升级到最新版本2。另外，

callback

选项应该是回调（函数），而你的

options

不精确。 我以版本 2 docs

为例

let arrtempi = ["00:21:30", "01:33:40", "00:00:16", "00:24:30", "00:23:30", "00:00:20", "00:01:00", "00:01:00", "00:00:17", "00:00:17", "00:00:14", "00:00:14", "00:00:14", "00:00:10", "00:00:16", "00:00:17", "00:00:19", "00:00:18", "00:35:20", "00:35:20"];
let arrDate = ["2023-06-13", "2023-04-29", "2023-06-13", "2023-07-03", "2023-07-11", "2023-07-12", "2023-07-27", "2023-07-27", "2023-07-27", "2023-07-27", "2023-07-28", "2023-07-28", "2023-07-28", "2023-07-27", "2023-07-20", "2023-07-28", "2023-07-28", "2023-07-20", "2023-08-08", "2023-08-08"];

function formatSeconds(seconds) {
  return new Date(seconds * 1000).toISOString().substr(11, 8)
}

function mostraGrafico() {
  let arrtempiSec = arrtempi.map(function(e) {
    e = e.split(":");
    e = e[0] * 3600 + e[1] * 60 + e[2];
    return e;
  });
  new Chart(idgTempoSforzo, {
    type: "line",
    data: {
      labels: arrDate,
      datasets: [{
        data: arrtempiSec,
        borderColor: "green",
        fill: false,
        pointRadius: 4,
      }],
    },
    options: {
      responsive: true,
      legend: {
        display: false
      },
      scales: {
        yAxes: [{
          ticks: {
            callback: formatSeconds
          }
        }]
      }

    }
  })

}

mostraGrafico()

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="idgTempoSforzo"></canvas>