альтернативный способ изменения наведенного ряда и его свойств точек на диаграмме HighCharts

Question

У меня есть линейная диаграмма с большим количеством серий, и мне нужно изменить цвет серии наведения и всех ее точек.

Предлагаемый подход состоит в том, чтобы использовать события mouseOver и mouseOut, и внутри них запустить .update метод для серии и .setState метод для всех его точек .

К сожалению, в моем случае это решение оказывается медленным, поэтому я старался его избегать.

Мне удалось изменить цвет серии, не используя методы .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