2013-02-11 4 views
0

Я использую JqPlot для отображения некоторых легенд графа на событиях jqplotMouseEnter и jqplotMouseLeave.JqPlot EnhancedLegendRenderer с событиями мыши

Вот мой код:

$('#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 к показанной/шкуре соответствующая серия на графике.

Как я могу заставить эту функцию работать?

Заранее спасибо.

EDIT

Вот мой 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" } 
       } 
       ] 
    } 
); 
+0

Я не могу воспроизвести этот вариант - он отлично работает в IE9, Chrome и FF. Можете ли вы показать, как JS для создания сюжета? –

+0

@nick_w: Я добавил код JS к сообщению. – user2023359

ответ

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(); 
    } 
}); 

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