Highcharts 非活动状态必须应用于除悬停项目之外的所有项目

Question

参考以下内容 jsfiddle https://jsfiddle.net/2f17L4at/

Highcharts.chart('container', {

chart: {
    type: 'column'
},

title: {
    text: 'Disabled inactive state'
},

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr']
},

plotOptions: {
    series: {
        states: {
            inactive: {
                enabled: true
            }
        }
    }
},

series: [{
    data: [1, 3, 2, 4]
}, {
    data: [5, 3, 4, 2]
}]
});

当我将鼠标悬停在 1 月的 series1 上时，其他月份的 series1 也会突出显示。我只想突出显示悬停月份的系列，其他所有内容都应处于非活动状态。谁能帮我实现这个目标？

Answer 1

您可以遍历活动系列中的点并将其状态设置为非活动：

    plotOptions: {
        series: {
            point: {
                events: {
                    mouseOver: function() {
                        const point = this;

                        point.series.points.forEach(p => {
                            if (p !== point) {
                                p.setState('inactive');
                            }
                        });
                    },
                    mouseOut: function() {
                        const point = this;

                        point.series.points.forEach(p => {
                            if (p !== point) {
                                p.setState('normal');
                            }
                        });
                    }
                }
            },
            ...
        }
    }

现场演示： https://jsfiddle.net/BlackLabel/fsdw21em/

API参考：https://api.highcharts.com/class-reference/Highcharts.Point#setState

Highcharts 非活动状态必须应用于除悬停项目之外的所有项目

Highcharts inactive state must be applied to all items except for hovered item

html

javascript

css

charts

highcharts