Javascript Highcharts：基于悬停标记的淡入淡出绘制线

我有一个带系列的散点图。一些观测值具有相应的极限值，我将其添加为绘图线。假设有两条唯一的绘图线，每个散射观测值仅属于其中一条。作为一个额外的复杂性，存在多个分散序列，因此必须对所有这些序列进行处理

如果图形上有2条绘图线，则当用户将鼠标悬停在任意系列的一个分散点上时，我只希望属于该点的绘图线保持可见，而其他绘图线将淡入淡出状态

我知道这是一个很大的要求，可能是不可能的。我已经开始摆弄这个，从我在这里找到的一个例子：。针对我的问题，我修改了小提琴，显示了2个数据系列，“plotline”变量中的数据表示1或2。但我不知道如何将这些数据链接到绘图线，并使它们如所解释的那样褪色

JSFiddle：

---

您可以使用

mouseOver

和

mouseOut

事件来显示或隐藏打印线：

plotOptions: {
    series: {
        point: {
            events: {
                mouseOver: function() {
                    var plotLines = this.series.yAxis.plotLinesAndBands;

                    plotLines.forEach(function(el, i) {
                        if (i === this.plotline - 1) {
                            el.svgElem.show();
                        } else {
                            el.svgElem.hide();
                        }
                    }, this);
                },

            }
        },
        events: {
            mouseOut: function() {
                var plotLines = this.yAxis.plotLinesAndBands;

                plotLines[0].svgElem.show();
                plotLines[1].svgElem.show();
            }
        }
    }
}

现场演示：

API参考：

---

谢谢你，这对我很有用。但是，它也不会隐藏打印线标签。这也很容易做到吗？我假设这不是SVG元素，它需要在for循环中有自己的引用。您好@John Hekman，是的，您可以用非常类似的方式隐藏或显示标签：

plotOptions: {
    series: {
        point: {
            events: {
                mouseOver: function() {
                    var plotLines = this.series.yAxis.plotLinesAndBands;

                    plotLines.forEach(function(el, i) {
                        if (i === this.plotline - 1) {
                            el.svgElem.show();
                        } else {
                            el.svgElem.hide();
                        }
                    }, this);
                },

            }
        },
        events: {
            mouseOut: function() {
                var plotLines = this.yAxis.plotLinesAndBands;

                plotLines[0].svgElem.show();
                plotLines[1].svgElem.show();
            }
        }
    }
}