プロジェクトに Highcharts JS を使用していますが、クリックした凡例項目を参照する方法がわかりません。クリックした凡例項目にクラスを切り替えて、アクティブ/無効な凡例項目にさまざまなスタイルを追加できるようにします。
legedItemClick イベントを使用すると、コンソール ログが起動されますが、子が見つかりません。(おそらく、これはレジェンド項目ではなくシリーズを参照しているためです)。例:
plotOptions:{
line:{
marker:{
symbol:'circle',
enabled: false
},
events: {
legendItemClick: function () {
$(this).addClass('new_class');
console.log('click click');
$(this).find('.legend-name').toggleClass('visible_true').toggleClass('visible_false');
$(this).find('.legend-icon').toggleClass('visible_true').toggleClass('visible_false');
}
},
showCheckbox: false
}
},
ハイチャート クリック イベントを使用せずに凡例項目内のスパンで jQuery クリック ハンドラーを使用しようとすると、何も起こらず、コンソール ログも起動しません。これはおそらく、ハイチャートのデフォルトのクリックハンドラーがバブリングなどを防止しているためです。例:
$('body').delegate('.highcharts-legend-item span', 'click', function(){
console.log('click');
$(this).find('.legend-name').toggleClass('visible_true');
$(this).find('.legend-icon').toggleClass('visible_true');
});