我正在尝试用 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;
}

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

I am trying to plot a race time "01:23:22" on a chart with Flot and so i can compare over time

javascript

jquery

flot