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

elcex8rz 于 2023-10-18 发布在 Chart.js

关注(0)|答案(1)|浏览(166)

我试图创建一个图表，represet的时间，每一次运行是在db.我不能插入格式为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/

chart.js

来源：https://stackoverflow.com/questions/76860425/insert-hour-minutes-and-second-in-the-vertical-axes-chart-js

1条答案

按热度按时间

ecfdbz9o1#

首先，我已经升级到最新版本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>

赞(0）回复(0）举报 2023-10-18

我来回答

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

1条答案

相关问题

热门标签

最新问答