0

我正在使用 JqPlot 在 jqplotMouseEnter 和 jqplotMouseLeave 事件上显示一些图例。

这是我的代码：

    $('#FinancialsLineGraph').bind('jqplotMouseEnter', function(ev, seriesIndex, pointIndex, data) {
            $('#FinancialsLineGraph .jqplot-table-legend').show();
    });
    $('#FinancialsLineGraph').bind('jqplotMouseLeave', function(ev, seriesIndex, pointIndex, data) {
            $('#FinancialsLineGraph .jqplot-table-legend').hide();
    });

使用上面的代码，当光标移动到图形内的实际图例上时，图例“闪烁”，用户无法使用 EnhancedLegendRenderer 显示/隐藏图中的相应系列。

我怎样才能使上述功能正常工作？

提前致谢。

编辑

这是我的 JS 情节代码。

var plotCogsLineGraph = $.jqplot('FinancialsLineGraph', [[30,31,34,40,45], [34,38,31,42,38]], 
{ 
            axes:
            {
                xaxis:
                {
                      ticks: ['5','4','3','2','1']
                },
                yaxis:
                {
                    label:'%',
                    pad: 1.05,
                    ticks: ['0','15','30','45','60']
                }
            },

            width: 480, height: 270,
            legend:{show:true, location: 's', placement: 'insideGrid', renderer: $.jqplot.EnhancedLegendRenderer},
    seriesDefaults: 
    {
                rendererOptions: {smooth: true}
    },
    series:[ 
                {
                    lineWidth:1, 
                    label:'COGS',
                    markerOptions: { size:1, style:'dimaond' }
                }, 
                {
                    lineWidth:1, 
                    label:'Wages',
                    markerOptions: { size: 1, style:"dimaond" }
                }
                ]
    }
);
4

1 回答 1

0

这里实际发生的是，jqplotMouseLeave当您输入图例时正在引发事件，导致它不显示，然后引发jqplotMouseEnter（当图例被隐藏时，您突然进入情节），导致它显示. 由于这个循环，你会得到闪烁。

尝试将您的'jqplotMouseLeave处理程序更改为：

$('#FinancialsLineGraph).bind('jqplotMouseLeave', function(ev, seriesIndex, pointIndex, data) {
    var top, right, bottom, left;
    var legend = $('#FinancialsLineGraph .jqplot-table-legend');    
    top = legend.offset().top;
    left = legend.offset().left;
    bottom = top + legend.height();
    right = left + legend.width();

    if (!(ev.pageX >= left && ev.pageX <= right && ev.pageY >= top && ev.pageY <= bottom)) {
        $('#chart1 .jqplot-table-legend').hide();
    }
});

只有当鼠标光标位置不包含在图例的边界框中时，才会隐藏图例。

于 2013-02-11T22:43:09.560 回答