plotly.js y 轴中的时间 (HH:MM:SS) 未正确绘制

Question

我正在尝试使用 plotly.js 在 y 轴上针对天数绘制时间 (HH:MM:SS)。绘制的图表未正确排序。谁能指导我做错了什么。我在此处附上了我的代码笔 link

HTML

    <head>
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

Javascript

Plotly.d3.csv("xyz.csv", function(err, rows){
var trace1 = {
  type: "scatter",
  mode: "lines",
  x:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53],
  y: ["08:15:00","08:18:00","08:25:00","08:06:00","08:31:00","08:23:00","08:35:00","08:18:00","08:25:00","08:06:00","08:26:45","08:19:20","08:06:00","08:06:00","08:20:00","08:17:22","08:18:14","08:18:00","08:09:00","08:32:00","08:16:20","08:14:29","08:14:31","08:32:00","08:39:00","08:29:00","08:27:00","08:28:00","08:24:00","08:09:00","08:32:00","08:16:20","08:14:29","08:14:31","08:32:00","08:39:00","08:29:00","08:27:00","08:28:00","08:24:00","08:25:00","08:26:45","08:19:20","08:06:00","08:06:00","08:20:00","08:17:22","08:18:00","08:25:00","08:06:00","08:25:00","08:06:00","08:31:00"],
  name: 'Time In',
  line: {color: '#17BECF'}
}

var data = [trace1];

var layout = {
  title: 'Attendance',
};

Plotly.newPlot('myDiv', data, layout);
})

Answer 1

看来不能只用时间，还需要约会

所以我用 .map(time => '2020-01-08 ' + time) 在每次开始时添加了一个虚拟日期，并用 yaxis: { tickformat: '%H:%M:%S' }.

将其隐藏在轴刻度中

这是一个工作片段：

var trace1 = {
  type: "scatter",
  mode: "markers",
  x:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53],
  y: ["08:15:00","08:18:00","08:25:00","08:06:00","08:31:00","08:23:00","08:35:00","08:18:00","08:25:00","08:06:00","08:26:45","08:19:20","08:06:00","08:06:00","08:20:00","08:17:22","08:18:14","08:18:00","08:09:00","08:32:00","08:16:20","08:14:29","08:14:31","08:32:00","08:39:00","08:29:00","08:27:00","08:28:00","08:24:00","08:09:00","08:32:00","08:16:20","08:14:29","08:14:31","08:32:00","08:39:00","08:29:00","08:27:00","08:28:00","08:24:00","08:25:00","08:26:45","08:19:20","08:06:00","08:06:00","08:20:00","08:17:22","08:18:00","08:25:00","08:06:00","08:25:00","08:06:00","08:31:00"].map(time => '2020-01-08 ' + time),
  name: 'Time In',
  line: {color: '#17BECF'}
}

var data = [trace1];

var layout = {
  title: 'Attendance',
  yaxis: {
      tickformat: '%H:%M:%S'
  }
};

Plotly.newPlot('myDiv', data, layout);

<head>
 <!-- Load plotly.js into the DOM -->
 <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
 <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

plotly.js y 轴中的时间 (HH:MM:SS) 未正确绘制

Time (HH:MM:SS) in plotly.js y axis is not plotted properly

javascript

graph

plotly.js