Question

我已经看过有关从x轴到工具提示的数据的教程和帖子，但是我用类别覆盖了它，无法弄清楚如何让x轴显示在工具提示中。

这就是我正在使用的：

function showTooltip(x, y, contents) {
        $('<div id="tooltip" class="flot-tooltip tooltip"><div class="tooltip-arrow"></div>' + contents + '</div>').css({
            top: y - 43,
            left: x - 15,
        }).appendTo("body").fadeIn(200);
    }      

   var data = [[1492854610, -1240],[1492939020, -1273],[1493025073, -1279],[1493117066, -1186],[1493198484, -1269],[1493289175, -1198],[1493370646, -1280],[1493458518, -1255],[1493543731, -1275],[1493630250, -1273],[1493716306, -1279],[1493803609, -1264],[1493889258, -1276],[1493975557, -1278],[1494064529, -1235],[1494155440, -1160],[1494237980, -1224],[1494321047, -1280],[1494407990, -1271],[1494494125, -1275],[1494581609, -1257],[1494668321, -1252],[1494753220, -1277],[1494847855, -1140],[1494925963, -1278],[1495012537, -1275],[1495099289, -1269],[1495188205, -1227],[1495273568, -1244],[1495358329, -1272]];

    $.plot($("#placeholder"), [{
        label: "Delay: ",
        data: data,
        color: "#3a8ce5"
    }], {
        xaxis: {
        mode: "categories",
        tickLength: 0,
        ticks: [[0, "1:50 AM"],[1, "1:17 AM"],[2, "1:11 AM"],[3, "2:44 AM"],[4, "1:21 AM"],[5, "2:32 AM"],[6, "1:10 AM"],[7, "1:35 AM"],[8, "1:15 AM"],[9, "1:17 AM"],[10, "1:11 AM"],[11, "1:26 AM"],[12, "1:14 AM"],[13, "1:12 AM"],[14, "1:55 AM"],[15, "3:10 AM"],[16, "2:06 AM"],[17, "1:10 AM"],[18, "1:19 AM"],[19, "1:15 AM"],[20, "1:33 AM"],[21, "1:38 AM"],[22, "1:13 AM"],[23, "3:30 AM"],[24, "1:12 AM"],[25, "1:15 AM"],[26, "1:21 AM"],[27, "2:03 AM"],[28, "1:46 AM"],[29, "1:18 AM"]]              
        },
        yaxis: {
                     min: -2000,
                     max: 1000,                  
                },
        series: {
            lines: {
                show: true,
                fill: true
            },
            points: {
                show: true,
            }
        },  
        grid: {
            hoverable: true,
            clickable: true,
            markings: [
            { color: '#000', lineWidth: 1, yaxis: { from: 0, to: 0 } },
                    ]
        },
        legend: {
            show: false
        }
    });

$("#placeholder").bind("plothover", function(event, pos, item) {
            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;

                    $("#tooltip").remove();
                    var y = item.datapoint[1].toFixed();

                    showTooltip(item.pageX, item.pageY,
                        item.series.label + " = " + y);
                }
            } else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });

我试图把时间作为类别的一部分。 item数组有3个数据，其中没有一个是

jFiddle： http://jsfiddle.net/zw14y8c3/2/

Answer 1

item.datapoint[0]数据具有x轴刻度的索引。有了它，您可以从ticks数组中获取实际的刻度标签：

var x = $("#placeholder").data('plot').getAxes().xaxis.ticks[item.datapoint[0]].label;

有关完整示例，请参阅更新后的fiddle。

如何在工具提示中包含类别数据

1 个答案: