在HighCharts图表中更改悬停系列及其点属性的替代方法

Question

我有一个包含很多系列的折线图，我需要改变悬停系列的颜色及其所有要点。

建议的方法是使用mouseOver和mouseOut事件，并在其中运行.update方法for the series和.setState方法for all its points。

不幸的是，在我的情况下，这个解决方案结果是滞后的，所以我试图避免它。

我能够在不使用.update方法的情况下更改系列的颜色，设置this.graph.stroke属性，但我无法为其点找到相应的可更改属性：.graphic.stroke属性似乎不是正确的（我已经浏览了通过Firefox Developer工具进行系列和点对象）。

JSfiddle相关代码：

        events: {
            mouseOver: function() {
              originalColor = this.color;
              this.graph.stroke="rgb(255,0,0)";
              this.points.forEach(p => p.graphic.stroke="rgb(255,0,0)}");
              //this.data.forEach(p => p.setState('hover'))
            },
            mouseOut: function() {
              this.graph.stroke=originalColor;
              this.points.forEach(p => p.graphic.stroke=originalColor);
              //this.data.forEach(p => p.setState())
            }
        }
    },
},

P.S。：评论的线条有效，但有很多系列和点，它们比this.graph.stroke=...运行得慢，所以点颜色的变化看起来与系列线的变化不同步。

所以，我的问题是：我可以访问series.points的哪个属性立即改变颜色？

Answer 1

禁用系列states并使用attr方法更改stroke和fill颜色：

plotOptions: {
    series: {
        states: {
            hover: {
                enabled: false
            },
            inactive: {
                enabled: false
            }
        },
        events: {
            mouseOver: function() {
                this.graph.attr({
                    stroke: "rgb(255,0,0)"
                });
                this.points.forEach(p => p.graphic.attr({
                    fill: "rgb(255,0,0)"
                }));
            },
            mouseOut: function() {
                this.graph.attr({
                    stroke: this.color
                });
                this.points.forEach(p => p.graphic.attr({
                    fill: this.color
                }));
            }
        }
    },
},

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

API参考：

https://api.highcharts.com/highcharts/series.line.states

https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr