如何按值秒格式化图表 y 轴和工具提示？

Question

我正在使用 flot char。我需要显示 yaxis H:i:s 时间格式（例如 yaxis - 00:00:00、00:05:00、00:10:00 等）和工具提示，如：10 小时 - 00:02:05 时间。这是我的数组数据，第二个元素以秒为单位：

var data = [[1, 0],[2, 0],[3, 0],[4, 0],[5, 0],[6, 0],[7, 0],[8, 0],[9, 7],[10, 123],[11, 47],[12, 0],[13, 0],[14, 0],[15, 0],[16, 0],[17, 0],[18, 0],[19, 0],[20, 0],[21, 0],[22, 0],[23, 0],[24, 0]];

这是flot char的代码：

this.options = {
                xaxis : {
                        mode : null,
                        tickLength : 5,
                        min : 1,
                        max : 24,
                        ticks: [[1, "1 hour"], [2, "2 hour"], [3, "3 hour"], [4, "4 hour"], [5, "5 hour"], [6, "6 hour"], [7, "7 hour"], [8, "8 hour"], [9, "9 hour"], [10, "10 hour"], [11, "11 hour"], [12, "12 hour"], [13, "13 hour"], [14, "14 hour"], [15, "15 hour"], [16, "16 hour"], [17, "17 hour"], [18, "18 hour"], [19, "19 hour"], [20, "20 hour"], [21, "21 hour"], [22, "22 hour"], [23, "23 hour"], [24, "24 hour"]]
                },
                series : {
                        lines : {
                                show : true,
                                lineWidth : 1,
                                fill : true,
                                fillColor : {
                                        colors : [{
                                                opacity : 0.1
                                        }, {
                                                opacity : 0.15
                                        }]
                                }
                        },
                        points: { show: true },
                        shadowSize : 0
                },
                selection : {
                        mode : "x"
                },
                grid : {
                        hoverable : true,
                        clickable : true,
                        tickColor : "#efefef",
                        borderWidth : 0,
                        borderColor : "#efefef"
                },
                tooltip : true,
                colors : ["#3734d5"]

        };

        var opt = {
                tooltipOpts : {
                        content : "<b>%x</b> hour - <span>%y</span> time",
                        defaultTheme : false
                }
        };

$.plot($("#chart"), [data], $.extend(true, opt, this.options));

如何格式化 tooltipOpts 内容？谢谢

Answer 1

您可以将 content 选项设置为函数而不是字符串，并像这样格式化时间值（此 fiddle 中的完整代码）：

  content: function(label, x, y, datapoint) {
    var seconds = (y % 60).toString();
    if (seconds.length == 1) {
      seconds = "0" + seconds;
    }

    y = Math.floor(y / 60);
    var minutes = (y % 60).toString();
    if (minutes.length == 1) {
      minutes = "0" + minutes;
    }

    y = Math.floor(y / 60);
    var hours = (y % 60).toString();
    if (hours.length == 1) {
      hours = "0" + hours;
    }

    var time = hours + ":" + minutes + ":" + seconds;
    return "<b>" + x + "</b> hour - <span>" + time + "</span> time";
  }

如何按值秒格式化图表 y 轴和工具提示？

how to format flot char yaxis and tooltip by value seconds?

javascript

jquery

flot