将鼠标悬停在标记上时,如何淡化高图中的其他yAxis?

问题描述

如果您将鼠标悬停在Short Term Fuel Trim上,则其他绘图线将逐渐消失。如何将相同的效果应用于yAxis,它将使除Short Term Fuel Trim

以外的其他yAxis消失

enter image description here

解决方法

您可以在系列yAxis.updatemouseOver事件中使用mouseOut方法来更改标题和标签颜色。

    function updateYAxes(chart,exception,color) {
        chart.yAxis.forEach(function(axis) {
            if (axis !== exception) {
                axis.update({
                    labels: {
                        style: {
                            color
                        }
                    },title: {
                        style: {
                            color
                        }
                    }
                },false);
            }
        },this);

        chart.redraw();
    }

    Highcharts.chart('container',{
        ...,plotOptions: {
            series: {
                events: {
                    mouseOver: function() {
                        updateYAxes(this.chart,this.yAxis,'#ededed');
                    },mouseOut: function() {
                        updateYAxes(this.chart,'black');
                    }
                }
            }
        }
    });

实时演示: http://jsfiddle.net/BlackLabel/ju9g05xe/

API参考:

https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver

https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOut