JqPlot EnhancedLegendRenderer с событиями мыши

Я использую 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" }
                }
                ]
    }
);

show-hide legend legend-properties mouseevent jqplot
person user2023359    schedule 11.02.2013    source источник
comment
Я не могу воспроизвести этот — он отлично работает в IE9, Chrome и FF. Можете ли вы показать, как создается JS для сюжета?   -  person nick_w    schedule 12.02.2013
comment
@nick_w: я добавил в пост код JS.   -  person user2023359    schedule 12.02.2013

Ответы (1)


arrow_upward
0
arrow_downward

Что на самом деле происходит здесь, так это то, что событие 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();
    }
});

Это скрывает легенду только в том случае, если положение курсора мыши не содержится в ограничивающей рамке легенды.

person nick_w    schedule 11.02.2013