Highcharts圖例懸停在條形圖上嗎？

Question

我正在使用圖表在網站上顯示地圖，折線圖和條形圖。 在折線圖中，當我將鼠標懸停在圖例上時，相應的折線會突出顯示。 我想對條形圖執行相同的操作，這樣，當我將鼠標懸停在圖例上時，條形圖就會高亮顯示，就像將鼠標懸停在條形圖本身上一樣。 我怎樣才能做到這一點？

Answer 1

一種可能的解決方案是為每個legend-item定義hover函數，並在此函數內部，為相關系列的所有點切換.setState('hover') 。 像下面這樣：

 var chart = new Highcharts.chart('container', { chart: { type: 'column' }, title: { text: 'Column chart with negative values' }, xAxis: { categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] }, credits: { enabled: true }, series: [{ name: 'John', data: [5, 3, 4, 7, 2] }, { name: 'Jane', data: [2, -2, -3, 2, 1] }, { name: 'Joe', data: [3, 4, 4, -2, 5] }] }); $('.highcharts-legend-item').each(function(index, element) { $(element).hover(function() { $.each(chart.series[index].points, function(idx, elem) { elem.setState('hover'); }); },function() { $.each(chart.series[index].points, function(idx, elem) { elem.setState(); }); }) }); 

 <script src="https://code.highcharts.com/modules/export-data.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>