右鍵點擊特定的圖例項目

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>