Question

很抱歉，如果这个问题已经受到质疑。我想我接近我想做的事情，但这是我省略的事情。

我有一个实时的flot图表，其在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轴的当前时间。也许有人需要这样做。第一个代码部分不会改变。第二部分是：

var string = "border-radius:10px 20px 30px 40px";
var result = string.match(/\d+/g);

console.log(result);

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

1 个答案: