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

Question

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

建议的方法是使用 mouseOver 和 mouseOut 事件，并在其中运行一个 .update 方法 and .setState method .

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

我可以在不使用 .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

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

alternative way to change hovered series and its points properties in a HighCharts chart

javascript

updates

highcharts