Estoy tratando de visualizar los tiempos de carrera rápida en un gráfico de líneas, por fecha. tengo los siguientes datos:
| IDENTIFICACIÓN | Fecha | Tiempo |
|---|---|---|
| 1 | 2021-10-20 00:00:00 | 1:59:11.19 |
| 2 | 2021-10-21 00:00:00 | 1:55:33.43 |
| 3 | 2021-10-22 00:00:00 | 1:54:52.82 |
| 4 | 2021-10-23 00:00:00 | 1:53:44.15 |
Los datos se convertirán en una matriz, como tal;
var runs = [ [1, "2021-10-20 00:00:00", "1:59:11.19"], [2, "2021-10-21 00:00:00", "1:55:33.43"], [3, "2021-10-22 00:00:00", "1:54:52.82"], [4, "2021-10-23 00:00:00", "1:53:44.15"] ];Intenté seguir el ejemplo de los documentos de desarrollo y el ejemplo JSFiddle sin suerte. Como solo muestran ejemplos que admiten números o fechas y horas absolutas/horas de creación.
¿Hay alguna manera de hacer que un gráfico de líneas funcione con tiempos relativos (incluidos ms), mostrando todos los tiempos cronológicamente por fecha?
si desea mostrar la fecha en el eje x y la hora en el eje y,
puede usar el tipo de datos de la hora del día de Google para el eje y
El tipo de datos de la columna timeofday de DataTable toma una matriz de 3 o 4 números, que representan horas, minutos, segundos y, opcionalmente, milisegundos, respectivamente.
Por ejemplo, la hora 8:30 am sería: [8, 30, 0, 0]
siguiente es la rutina utilizada para construir la tabla de datos
var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('timeofday', 'Time'); for (var i = 0; i < runs.length; i++) { // convert date var rowDate = new Date(runs[i][1]); // convert time to timeofday data type [h, m, sec, ms] var rowTime = runs[i][2].split(':'); var ms = rowTime[rowTime.length - 1].split('.'); rowTime = rowTime.map(function (timeValue, index) { if (index === (rowTime.length - 1)) { return parseInt(ms[0]); } else { return parseInt(timeValue); } }); rowTime.push(parseInt(ms[1])); // add data row data.addRow([rowDate, rowTime]); }ver siguiente fragmento de trabajo...
google.charts.load('current', { packages: ['corechart'] }).then(function () { var runs = [ [1, "2021-10-20 00:00:00", "1:59:11.19"], [2, "2021-10-21 00:00:00", "1:55:33.43"], [3, "2021-10-22 00:00:00", "1:54:52.82"], [4, "2021-10-23 00:00:00", "1:53:44.15"] ]; var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('timeofday', 'Time'); for (var i = 0; i < runs.length; i++) { // convert date var rowDate = new Date(runs[i][1]); // convert time to timeofday data type [h, m, sec, ms] var rowTime = runs[i][2].split(':'); var ms = rowTime[rowTime.length - 1].split('.'); rowTime = rowTime.map(function (timeValue, index) { if (index === (rowTime.length - 1)) { return parseInt(ms[0]); } else { return parseInt(timeValue); } }); rowTime.push(parseInt(ms[1])); // add data row data.addRow([rowDate, rowTime]); } var chart = new google.visualization.LineChart(document.getElementById('chart')); chart.draw(data, { chartArea: { height: '100%', width: '100%', top: 40, left: 64, right: 40, bottom: 40 }, hAxis: { format: 'MM/dd/yyyy', ticks: data.getDistinctValues(0) }, height: '100%', legend: { position: 'top' }, width: '100%' }); }); html, body { height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #chart { min-height: 400px; height: 100%; } <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart"></div>