我可以在悬停时使用highcharts列堆叠而不是突出显示整个系列

正如你在这里看到的jsfiddle。如果我使用highcharts柱column: {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, 3, 2, 1]

    }, {

        name: 'Joe',

        data: [3, 4, 4, 2, 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>


繁星点点滴滴
浏览 512回答 2
2回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript