Время (ЧЧ: ММ: СС) в графике. js Ось y не построена должным образом - PullRequest
Новая
       5

Время (ЧЧ: ММ: СС) в графике. js Ось y не построена должным образом

1 голос
/ 08 января 2020

Я пытаюсь построить время (ЧЧ: ММ: СС) на оси Y относительно дней, используя график. js. Диаграмма построена неправильно. Может кто-нибудь подсказать, пожалуйста, что я делаю не так. Я приложил свою ссылку на кодовую ссылку здесь

Ссылка на кодовую карту

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);
})

1 Ответ

2 голосов
/ 08 января 2020

Кажется, вы не можете просто использовать время в одиночку, ему тоже нужна дата.

Поэтому я добавил фиктивную дату в начало каждого времени с помощью .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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...