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

Question

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

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

不幸的是，就我而言，这个解决方案结果是滞后的，所以我试图避免它。

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

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

禁用系列状态并使用attr方法更改描边和填充颜色:

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