javascript-我可以在悬停时使用highcharts列堆叠而不突出整个意甲

如您在这里看到的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

原文链接：https://www.f2er.com/html/530520.html

javascript-我可以在悬停时使用highcharts列堆叠而不突出整个意甲

猜你在找的HTML相关文章