Question

Vanilla HighCharts能够在图例中单击特定项目时添加事件处理（请参阅here），并使用此功能隐藏和显示系列。

HighCharts Custom Events添加了在图例上右键单击（或显示上下文菜单）时添加事件处理的功能，但不包括图例中的单个项目。它还添加了在图表中右键单击一个点时触发事件的功能。

问题：有没有办法在图例中右键点击特定系列时触发事件？

Example JSFiddle here（并在下方内嵌）。我的目标是提示“系列1在图例中被右键单击”。

$(function () {
$('#container').highcharts({
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        events: {
                legendItemClick: function () {
                        alert('Series 1 was clicked in the legend')
                    return false;
                }
            }
    },
    {
        data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120],
        events: {
                legendItemClick: function () {
                        alert('Series 2 was clicked in the legend')
                    return false;
                }
            }
    }],
    legend : {
        itemEvents: {
            contextmenu: function () {
                alert('The legend was right clicked');
            }
        }
    }
});
});

Answer 1

您不需要插件。只需要定期的jquery事件绑定，它就更直接了：

 $('.highcharts-legend-item').on('contextmenu', function(){  
     alert($(this).children('text').text());
 });

完整代码：

$(function() {
  $('#container').highcharts({
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

    }, {
      data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]

    }],
  });

  $('.highcharts-legend-item').on('contextmenu', function() {
    alert($(this).children('text').text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://blacklabel.github.io/custom_events/customEvents.js"></script>

<div id="container" style="height: 400px"></div>

右键单击特定图例项

1 个答案: