javascript - 我正在尝试使用 Flot 在图表上绘制比赛时间 "01:23:22"，这样我就可以随着时间的推移进行比较

Question

我正在编写一个应用程序，根据日期和时间跟踪游泳运动员的比赛结果

数据集将与此类似(日期、比赛时间)

    var results = [
        ['12/01/2015', '02:05:00'],
        ['12/08/2015', '01:15:00'],
        ['12/15/2015', '04:20:00']
    ];

我正在使用以下代码尝试绘制它，但我无法获得准确的绘图，并且工具提示是错误的。

<script>
    $(document).ready(function(){

        var originalData = [
            ['12/01/2015', '02:05:00'],
            ['12/08/2015', '01:15:00'],
            ['12/15/2015', '04:20:00']
        ];

        var data = [];
        var test = [];

        for (var i = 0; i < originalData.length; i++) {
            var dataPoint = [];
            dataPoint.push((new Date(originalData[i][0])));

            var time = originalData[i][1].split(':');
            var hours = parseInt(time[0]);
            var minutes = parseInt(time[1]);
            var seconds = parseInt(time[2]);

            dataPoint.push(hours + minutes + seconds /60);

            data.push(dataPoint);

        }


        var options = {
            series: {
                lines: {
                    show: true
                },
                points: {
                    show: true
                }
            },
            xaxis: {
                mode: 'time',
                timeformat: "%0m/%0d %0H:%0M",
                tickSize: [5, 'week']
            },

            yaxis: {
                min: 0,
                max: 24
            },
            grid: {
                hoverable:true,
                clickable:true
            }
        };

        var plot = $.plot("#placeholder"
                ,[data], options);

        var previousPoint = null;
        $("#placeholder").bind("plothover", function (event, pos, item) {
            $("#x").text(pos.x.toFixed(2));
            $("#y").text(pos.y.toFixed(2));

            if (item) {
                if (previousPoint != item.datapoint) {
                    previousPoint = item.datapoint;

                    $("#tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                            y = item.datapoint[1].toFixed(2)

                    showTooltip(item.pageX, item.pageY,
                            y);
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });

        function showTooltip(x, y, contents) {
            $('<div id="tooltip">' + contents + '</div>').css( {
                position: 'absolute',
                display: 'none',
                top: y + 5,
                left: x + 5,
                border: '1px solid #fdd',
                padding: '2px',
                'background-color': '#fee',
                opacity: 0.80
            }).appendTo("body").fadeIn(200);
        }
    });

</script>

我的目标是绘制 3 个值，以便我可以看到游泳者时间的差异

代码

dataPoint.push(小时+分钟+秒/60);

把事情搞砸了，没有按我的预期工作。

如有任何帮助，我们将不胜感激

Answer 1

您的代码dataPoint.push(hours + minutes + seconds /60);将小时和分钟视为相同，这会导致错误。如果您想以分钟为单位显示比赛时间，请使用 60*hours + minutes + seconds/60 (如果您想在几小时内使用 hours + minutes/60 + seconds/3600 )。

要从比赛时间(以分钟为单位)获取原始格式的比赛时间，请使用如下内容:

function getFormattedTime(timeInMinutes) {
    var hours = Math.trunc(timeInMinutes / 60);
    var minutes = Math.trunc(timeInMinutes % 60);
    var seconds = Math.round(60 * (timeInMinutes - Math.round(timeInMinutes)));

    var result = hours.toString() + ':';
    result += (minutes < 10 ? '0' : '') + minutes.toString() + ':';
    result += (seconds < 10 ? '0' : '') + seconds.toString();

    return result;
}