右键点击特定的图例项目

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

来源

2016-02-09 Jonny

你不需要这个插件。这是更直接的与只是普通的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>

来源

2016-02-09 18:52:16 Mark

右键点击特定的图例项目

回答

相关问题