带有鼠标事件的 JqPlot EnhancedLegendRenderer答案

【问题标题】：JqPlot EnhancedLegendRenderer with Mouse events带有鼠标事件的 JqPlot EnhancedLegendRenderer
【发布时间】：2013-02-11 00:31:38
【问题描述】：

我正在使用 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" }
                }
                ]
    }
);

【问题讨论】：

我无法复制这个 - 它在 IE9、Chrome 和 FF 中运行良好。你能展示一下 JS 是如何创建情节的吗？
@nick_w：我已经在帖子中添加了 JS 代码。

标签： mouseevent show-hide jqplot legend legend-properties

【解决方案1】：

这里实际发生的是，当您输入图例时会引发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();
    }
});

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

【讨论】：