JqPlot EnhancedLegendRenderer with Mouse events

我正在使用JqPlot在jqplotMouseEnter和jqplotMouseLeave事件上顯示一些圖例。JqPlot EnhancedLegendRenderer with Mouse events

這是我的代碼：

$('#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" } 
       } 
       ] 
    } 
);

來源

2013-02-11 user2023359

我無法重現這一個 - 它在IE9，Chrome和FF中正常工作。你能展示JS如何創建劇情？ – 2013-02-11 21:44:25

@nick_w：我已將JS代碼添加到帖子中。 – user2023359 2013-02-11 22:15:09

什麼實際發生在這裏的是，當你進入傳說中被提出的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-11 22:43:09

JqPlot EnhancedLegendRenderer with Mouse events

回答

相關問題