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

回答

相关问题