Как превратить количество миллисекунд в интервал времени для использования в Google Charts?

У меня есть столбец с количеством миллисекунд, который я хотел бы использовать в диаграмме Google Charts для представления длительности. Как я могу превратить это число в промежуток времени?

Источник

3 ответа

Решение

В Google Charts промежуток времени можно представить с помощью timeofday тип, который позволит вам добавить два раза и получить третий, и сделать диаграммы автоматически форматировать вещи правильно. timeofday на самом деле массив с четырьмя элементами: часы, минуты, секунды и (необязательно) миллисекунды. Смотрите объяснение этой страницыtimeofday под type свойство для DataTable's cols,

Каждое поле 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;
}

Предостережение: я не думаю, что timeofday позволит вам провести промежуток более 24 часов. Если вам нужна эта функциональность, вам может понадобиться number колонку и напишите свое собственное форматирование.

Источник

Чтобы расширить ответ Кенни, если вы вводите свои данные в виде миллисекунд, вы можете использовать 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 */]);
Источник

Используя как 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 исправил это.

Источник
Другие вопросы по тегам