谷歌用相对“时间戳”绘制时间线图表

Question

我试图在折线图中可视化每个日期的速度运行时间。我有以下数据：

ID	日期	时间
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 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"]
];

我尝试遵循开发文档中的示例，以及示例< a href="https://jsfiddle.net/api/post/library/pure/" rel="nofollow noreferrer">JSFiddle 没有任何运气。因为它们仅显示支持数字或绝对日期时间/创建时间的示例。

有没有办法使折线图与相对时间（包括毫秒）一起工作，按日期的时间顺序显示所有时间？

Answer 1

如果您想在 x 轴上显示日期并在 y 轴上显示时间，
您可以使用 google 的 timeofday 数据类型来表示-轴

DataTable timeofday 列数据类型采用 3 或 4 个数字的数组，分别表示小时、分钟、秒和可选的毫秒。
例如，上午 8:30 的时间为：[8, 30, 0, 0]

以下是用于构建数据表的例程

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

，请参阅以下工作片段...

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>