时间戳

首页 > 解决方案 > 在 HighCharts 图表中更改悬停系列及其点属性的替代方法

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

问题描述

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

一种建议的方法是使用 mouseOver 和 mouseOut 事件，并在它们内部运行一个用于系列.update的方法和用于所有点的方法。.setState

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

我能够在不使用 .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())
            }
        }
    },
},

PS：注释线可以工作，但是有很多系列和点，它们的运行速度比this.graph.stroke=...所以点颜色的变化看起来与系列线的变化不同步。

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

标签： javascripthighchartsupdates

解决方案

禁用系列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

推荐阅读