如何在工具提示浮點圖中顯示當前時間？

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軸的當前時間。 也許有人需要這樣做。 第一個代碼部分不變。 第二部分是這樣的：

$("#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);
            }
        });