0

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" }
                }
                ]
    }
);
4

1 に答える 1

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

これは、マウスカーソルの位置が凡例のバウンディングボックス内に含まれていない場合にのみ、凡例を非表示にします。

于 2013-02-11T22:43:09.560 に答える