如您在这里看到的jsfiddle.
如果我将highcharts columns用于列：{stacking：’normal’}.
当您将鼠标悬停在整个系列上时,它将以相同的名称突出显示整个系列.
有什么办法我只能突出显示悬停的元素而不会突出显示该元素,而不会以任何方式影响系列中的其他元素？
我也想保留悬停标签.
Highcharts.chart('container',{
chart: {
type: 'column'
},title: {
text: 'Stacked column chart'
},xAxis: {
categories: ['Apples','Oranges','Pears','Grapes','Bananas']
},yAxis: {
min: 0,title: {
text: 'Total fruit consumption'
},stackLabels: {
enabled: true,style: {
fontWeight: 'bold',color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},legend: {
align: 'right',x: -30,verticalAlign: 'top',y: 25,floating: true,backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',borderColor: '#CCC',borderWidth: 1,shadow: false
},tooltip: {
headerFormat: '<b>{point.x}</b><br/>',pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},plotOptions: {
column: {
stacking: 'normal',dataLabels: {
enabled: true,color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},series: [{
name: 'John',data: [5,3,4,7,2]
},{
name: 'Jane',data: [2,2,1]
},{
name: 'Joe',data: [3,5]
}]
});<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>最佳答案
您可以禁用非活动效果并使用悬停状态：
plotOptions: {
...,column: {
stacking: 'normal',states: {
inactive: {
enabled: false
},hover: {
color: 'blue'
}
}
}
}
现场演示：https://jsfiddle.net/BlackLabel/Lg796ha3/
API参考：https://api.highcharts.com/highcharts/series.column.states.hover.color
