Requirement: Hover over the table tr element to select the corresponding ring graph and display the prompt text.

Code:

let chart_; Highcharts.chart('container', { chart: { type: 'pie', options3d: { enabled: true, alpha: 50}}, colors:["#0071dd","#33b1ff","#fd491a","#18f273","#eaff00","#4070ff","#f833ff","#ff4cfa","#9ccbe6","#95e6d8","#ff99cb","# fd491a","#ffeb0d","#69eef9","#26ffc9","#ff8c19","#ac59ff","#ff0d9a","#ff5533","#ace65c","#f1d848","#feccca","#ff8a73","# D5fa96 ","#ffc499","#ff8a73"], title: {floating:true, text: 'float', plotOptions: {pie: {innerSize: 200, depth: 70, dataLabels: { enabled: false, }, } }, series: [{ name: 'Delivered amount', data: [ ['Kiwi', 3], ['Mixed nuts', 1], ['Oranges', 6], ['Apples', 8], ['Pears', 4], ['Clementines', 4], ['Reddish (bag)', [' bunch ', 1]]}]}, function(c) {// Note (bunch) = [0].center[1], titleHeight = parseInt(c.title.styles.fontSize); C.settitle ({y:centerY + titleHeight/2}); chart_=c; }); $(function(){ $('body').on('mouseover','tr',function(){ let chartData=chart_.series[0].data; for(let i in chartData){ if($(this).find('.name').html()==chartData[i].name){ chart_.series[0].data[i].select() chart_.tooltip.refresh(chart_.series[0].data[i]); } } }) $('body').on('mouseout','table',function(){ chart_.tooltip.hide(); })})Copy the code

Example: jshare.com.cn/public/P0Gs…