FlotJS 工具提示扰乱了响应能力？

Question

我正在开发一个应用程序，我在其中使用 FlotJS 图表库绘制图形，并且我打开了工具提示，以便用户可以将鼠标悬停在点上，并可以在特定日期告诉每个点的内容。

与this interactive graph example by flot一样，我们可以将鼠标悬停在这些点上以查看 sin 和 cos 的值。

我正在使用 Smart Admin Responsive Theme in my project and if you navigate to the demo of graphs they are offering, there is also a section on Flot Chart Demos

如果你仔细看一下顺序第二的罪恶图表，它和我做的很相似。将鼠标悬停在点上会显示工具提示以查看 sin 的值。

我面临的问题是，如果您将鼠标悬停在最后几个点上，工具提示会出现，但它会扰乱页面的响应能力，并且每次都看不到。

如何解决这个问题？有什么方法可以让工具提示出现在鼠标指针位于页面末尾时的左侧吗？

编辑

选项对象

var layerOptions = {
    xaxis : {
        mode : "time"
    },
    legend : {
        show : true,
        noColumns : 1, // number of colums in legend table
        labelFormatter : null, // fn: string -> string
        labelBoxBorderColor : "#000", // border color for the little label boxes
        container : null, // container (as jQuery object) to put legend in, null means default on top of graph
        position : "ne", // position of default legend container within plot
        margin : [0, 5], // distance from grid edge to default legend container within plot
        backgroundColor : "#efefef", // null means auto-detect
        backgroundOpacity : 0.4 // set to 0 to avoid background
    },
    tooltip : true,
    tooltipOpts : {
        content : "<b>%s</b> content on <b>%x</b> was <b>%y</b>",
        dateFormat : "%y-%m-%d",
        defaultTheme : false
    },
    grid : {
        hoverable : true,
        clickable : true
    },
    series: {
        /*bars: {
            show: true, 
            barWidth: 1000 * 60 * 60 * 24 * 30,
            order: 1
        }*/
    }
};

Answer 1

是的，您可以根据 window 大小动态设置工具提示的位置。我在其中一个浮动页面中使用它在靠近右边界时将工具提示向左翻转：

var prevPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
    if (item) {
        if (prevPoint != item.dataIndex) {
            prevPoint = item.dataIndex;
            $("#tooltip").remove();

            var x = item.datapoint[0].toFixed(2),
                y = item.datapoint[1].toFixed(2),
                text = item.series.label + ' content on ' + x + ' was ' + y;
            showTooltip(item.pageX, item.pageY, text);
        }
    } else {
        $("#tooltip").remove();
        prevPoint = null;
    }
});

function showTooltip(x, y, content) {
    var cssParams = {
        position: 'absolute',
        display: 'none',
        border: '1px solid #888888',
        padding: '2px',
        'background-color': '#eeeeee',
        opacity: 0.8
    };
    if (x < 0.8 * windowWidth) {
        cssParams.left = x + 3;
    }
    else {
        cssParams.right = windowWidth - x + 6;
    }
    if (y < 0.8 * windowHeight) {
        cssParams.top = y + 3;
    }
    else {
        cssParams.bottom = windowHeight - y + 6;
    }
    $('<div id="tooltip">' + content + '</div>').css(cssParams).appendTo('body').fadeIn(100);
}

windowHeight 和 windowWidth 是在调整大小事件中更新的全局变量（使用 $(window).height()）。如果愿意，您也可以使用容器元素的尺寸。

您可以在使用给定的 events/functions 时删除工具提示插件和选项。

FlotJS 工具提示扰乱了响应能力？

FlotJS tooltip messing with the responsiveness?

javascript

html

css

responsive-design

flot