如何在工具提示图表中显示当前时间？

Question

抱歉，如果这个问题已经被质疑过。我认为我已经接近我想做的事情，但这是我忽略的事情。

我有一个实时图表，它在 x 轴上显示当前时间 (HH:mm:ss)，在 y 轴上显示随机值。我想在工具提示中显示值 y 和当前时间。

我设法显示了一个时间（与当前时间不对应）和随机值。我的问题是如何显示实际的当前时间？

这是我的代码：

xaxis: {
                mode: "time",
                tickSize: [2, "second"],
                tickFormatter: function (v, axis) {
                    var date = new Date(v);

                    if (date.getSeconds() % 5 == 0) {
                        var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

                        var w = hours + ":" + minutes + ":" + seconds;

                        return w;
                    } else {
                        return "";
                    }
                },
                axisLabel: "Time",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 10
            },

yaxis: {
                min: 0,
                max: 100,
                tickSize: 5,
                tickFormatter: function (v, axis) {
                    if (v % 10 == 0) {
                        return v + "%";
                    } else {
                        return "";
                    }
                },
                axisLabel: "CPU loading",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 6
            },

现在工具提示显示：

   $("#placeholder").bind("plothover", function (event, pos, item) {

    if ($("#enablePosition:checked").length > 0) {
        var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
        $("#hoverdata").text(str);
    }

    if ($("#enableTooltip:checked").length > 0) {
        if (item) {
            var x = item.datapoint[0].toFixed(2),
                y = item.datapoint[1].toFixed(2);
            ygb = x;


            var date = new Date(x * 1000);
            // Hours part from the timestamp
            var hours = date.getHours();
            // Minutes part from the timestamp
            var minutes = "0" + date.getMinutes();
            // Seconds part from the timestamp
            var seconds = "0" + date.getSeconds();

            // Will display time in 10:30:23 format
            var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);

            $("#tooltip").html("At hour " + formattedTime + " " + item.series.label + " is " + y)
                .css({ top: item.pageY + 5, left: item.pageX + 5 })
                .fadeIn(200);
        } else {
            $("#tooltip").hide();
        }
    }
});

希望我让自己明白了。非常感谢！

Answer 1

我设法在工具提示上显示 x-axis'当前时间。也许有人需要做同样的事情。第一个代码部分没有改变。第二部分是这样的：

$("#placeholder").bind("plothover", function (event, pos, item) {

            if ($("#enablePosition:checked").length > 0) {
                var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";

            }

            if ($("#enableTooltip:checked").length > 0) {
                if (item) {
                    var x = parseInt(item.datapoint[0]);
                    var y = item.datapoint[1].toFixed(2);

                    //Formating from UNIX timestamp to "HH:mm:ss"
                    //To do so you also must to include moment.js library
                    var timestamp = moment(x).format("HH:mm:ss");
                   //Display tooltip:
                    $("#tooltip").html("At hour " + timestamp + " " + item.series.label + " is " + y)
                        .css({ top: item.pageY + 5, left: item.pageX + 5 })
                        .fadeIn(200);
                } else {
                    $("#tooltip").hide();
                }
            }
        });

        $("#placeholder").bind("plotclick", function (event, pos, item) {
            if (item) {
                $("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
                plot.highlight(item.series, item.datapoint);
            }
        });

如何在工具提示图表中显示当前时间？

How to display current time in a tooltip flot chart?

time

jquery

tooltip

flot