Javascript 如何将毫秒数转换为时间跨度，以便在谷歌图表中使用？

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

在谷歌图表中，可以使用

timeofday

类型表示时间跨度，这将允许您添加两次并获得第三次，并使图表自动正确格式化。一个

timeofday

实际上是一个包含四个元素的数组：小时、分钟、秒和（可选）毫秒。有关数据表的

cols

，请参见

type

属性下的

timeofday

说明

timeofday

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

您可以使用此功能将毫秒时间跨度转换为

时间间隔

：

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

---

警告：我不认为

一天的时间

会让你保持超过24小时的时间跨度。如果您需要该功能，您可能需要使用

数字
列并编写自己的格式。
在谷歌图表中，时间跨度可以使用
timeofday
类型表示，这将允许您添加两次并获得第三次，并使图表自动正确格式化。一个
timeofday
实际上是一个包含四个元素的数组：小时、分钟、秒和（可选）毫秒。有关数据表的
cols
，请参见
type
属性下的
timeofday
说明

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

您可以使用此功能将毫秒时间跨度转换为
时间间隔
：

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

警告：我不认为
一天的时间
会让你保持超过24小时的时间跨度。如果您需要该功能，您可能需要使用
数字
列并编写自己的格式。
要扩展Kenny的答案，如果您以毫秒为单位输入数据，您可以使用DataView将其转换为
时间
数据类型：

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 */]);

要扩展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 */]);

使用as
asgallant
answer，将答案从
Kenny Dewhirst
扩展，我最终做了一些非常类似的事情，但没有使用函数
toTimeStamp
，而是使用了
新日期（毫秒）
。下面使用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 */])

注意：使用
键入：“日期”
使横轴不显示小时数，以防图表显示一天的数据。更改为
datetime
修复了此问题。
使用as
asgallant
答案，将答案从
扩展到Kenny Dewhirst
我最终做了一些非常类似的事情，但我没有使用函数
toTimeStamp
，而是使用了
新日期（毫秒）
。下面使用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 */])

注意：使用
键入：“日期”
使横轴不显示小时数，以防图表显示一天的数据。更改为
datetime
修复了此问题