当用户向下移动页面时,jQuery flot悬停不起作用

时间:2014-02-05 07:36:58

标签: javascript jquery flot

我正在使用jQuery flot。我似乎无法很好地解释这个错误。但从它的外观来看,当用户向下移动到页面时,悬停不起作用:这是视频: http://screencast.com/t/qZIjJ8jsi

请注意,当我在我的页面顶部时,悬停正在运行,但是当我下到页面时,将悬停在这些点上将不起作用。

我的页面是响应式的(不确定这是否相关,但只是说)。看起来这是一个CSS问题。所以这是我的代码:

var graphData = decodeURIComponent(jQuery("#graphData").val());
    graphData = jQuery.parseJSON(graphData);

    var visitors = new Array();
    var totalVisitors = 0;
    jQuery.each(graphData,function(index,value){
        visitors[index] = [value[0],value[1]];
        totalVisitors = totalVisitors + parseInt(value[1]);
    });

    jQuery(".date-figures").text(totalVisitors);
    var visitor = $("#activeUsers"),
    data_visitor = [{
        data: visitors,
        color: '#058DC7'
    }],
    options_lines = {
        series: {
            lines: {
                show: true,
                fill: true,
                fillColor: "#E5F3F9",
                color:"#058DC7",
            },
            points: {
                show: true
            },
            hoverable: true
        },
        grid: {
            backgroundColor: '#FFFFFF',
            borderWidth: 0,
            borderColor: '#CDCDCD',
            hoverable: true
        },
        legend: {
            show: true
        },
        xaxis: {
            mode: "time",
        },
        yaxis: {
           show:true
        },
    }; 
    $.plot(visitor, data_visitor, options_lines);
    function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5,
            padding: '2px 10px 2px 10px',
            opacity: 0.8,
        }).appendTo("body").fadeIn(200);
    }

    var previousPoint = null;
    $('#visitor-stat, #order-stat, #user-stat,#activeUsers').bind("plothover", function (event, pos, item) {
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                var d = new Date(item.datapoint[0]);
                var day = parseDay(d.getDay());
                var date = d.getDate();
                var month = parseMonth(d.getMonth());
                var year = d.getFullYear();
                var tooltipWording = "<b>"+day+", "+month+" "+date+", "+year+"</b>";
                tooltipWording += "<ul>";
                tooltipWording += "<li>Visits: <b>"+item.datapoint[1]+"</b></li>";
                tooltipWording += "</ul>";
                showTooltip(item.pageX, item.pageY, tooltipWording);
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;            
        }
    });
}); 

这里有什么问题?对你的帮助表示感谢!谢谢! :)

0 个答案:

没有答案