0

我有一列是毫秒数，我想在 Google Charts 图表中使用它来表示持续时间。如何将该数字转换为时间跨度？

4

3 回答 3

2

要扩展 Kenny 的答案，如果您以毫秒为单位输入数据，则可以使用 DataView 将其转换为timeofday数据类型：

var timeFormatter = new google.visualization.DateFormat('HH:mm:ss.SSS'); // set this pattern however you need to format your time display
var view = new google.visualization.DataView(data);
view.setColumns([/* columns before timeofday */, {
    type: 'timeofday',
    label: 'Time of Day',
    calc: function (dt, row) {
        var timeOfDay = toTimeSpan(data.getValue(row, /* time column index */);
        var formattedTime = timeFormatter.formatValue(timeOfDay);
        return {v: timeOfDay, f: formattedTime};
    }
}, /* columns after timeofday */]);
于 2014-05-27T20:28:59.703 回答
1

在 Google Charts 中，可以使用timeofday类型表示时间跨度，这将允许您添加两次并获得第三次，并使图表自动正确格式化。Atimeofday实际上是一个包含四个元素的数组：小时、分钟、秒和（可选）毫秒。请参阅此页面对 DataTable 属性timeofday下的说明。typecols

的每个字段timeofday都必须在该类型增量的范围内；您不能将整个时间跨度转储到毫秒字段中并称其为一天，因为超过 999 的任何内容都超出了范围。

您可以使用此函数将毫秒时间跨度转换为timeofday：

function toTimeSpan(milliseconds)
{
    var timespan = [0, 0, Math.floor(milliseconds / 1000), milliseconds % 1000];

    // Minutes
    if (timespan[2] >= 60)
    {
        timespan[1] = Math.floor(timespan[2] / 60);
        timespan[2] %= 60;

        // Hours
        if (timespan[1] >= 60)
        {
           timespan[0] = Math.floor(timespan[1] / 60);
           timespan[1] %= 60;
        }
    }

    return timespan;
}

一个警告：我认为 atimeofday不会让你保持超过 24 小时的跨度。如果您需要该功能，您可能需要使用number列并编写自己的格式。

于 2014-05-27T12:54:25.577 回答
1

使用作为asgallant答案，这扩展了答案，Kenny Dewhirst我最终做了一些非常相似的事情，但我没有使用函数toTimeStamp，而是使用了new Date(milliseconds). 下面的代码使用 livescript。

   function millisToDate dt, row
      date = new Date(dt.getValue(row, 0))
      dateFormatter = new google.visualization.DateFormat({pattern: "EEEE d 'de' MMMM 'de' yyyy, H:mm"});
      {v: date, f: dateFormatter.formatValue date}

   view = new google.visualization.DataView data
     view.setColumns([/* columns before timeofday */, {
     type: 'datetime',
     calc: millisToDate
    },  /* columns after timeofday */])

注意：如果type: 'date'图表显示一天数据，则使用横轴不显示小时数。更改为datetime修复此问题。

于 2016-05-16T14:52:49.247 回答