HighchartsReact堆叠面积图：实现hover时两点间连线效果

我想在Highcharts React的堆叠面积图里，实现鼠标hover时连接图上对应点的线条效果。

当前效果：
期望效果：

我的当前配置如下：

plotOptions: {
    series: {
        marker: {
            enabled: false,
            symbol: "circle",
            radius: 2,
            states: {
                hover: {
                    enabled: true,
                }
            }
        }
    },
    area: {
        stacking: 'normal', //Stacked area
        lineColor: '#666666',
        lineWidth: 1,
        marker: {
            lineWidth: 1,
            lineColor: '#666666'
        }
    }
},

解决方案 #

要实现这种hover时跨系列点的连线效果，可通过以下两种方式实现：

方式一：利用内置共享Tooltip和十字线（简单高效）

开启共享Tooltip后，Highcharts会自动触发同一X轴位置所有系列点的hover状态，配合十字线就能达到近似的对齐效果，配置修改如下：

plotOptions: {
    series: {
        marker: {
            enabled: false,
            symbol: "circle",
            radius: 2,
            states: {
                hover: {
                    enabled: true,
                    radius: 3, // 放大hover点提升辨识度
                    lineWidth: 2
                }
            }
        },
        states: {
            hover: {
                brightness: 0.1 // hover时系列轻微提亮，增强视觉反馈
            }
        }
    },
    area: {
        stacking: 'normal',
        lineColor: '#666666',
        lineWidth: 1,
        marker: {
            lineWidth: 1,
            lineColor: '#666666'
        }
    }
},
tooltip: {
    shared: true, // 关键：开启共享Tooltip，触发同X轴所有点的hover
    crosshairs: {
        enabled: true, // 显示X轴十字线，辅助点对齐
        color: '#999',
        dashStyle: 'shortdot'
    }
}

方式二：自定义动态连线（精准点到点）

如果需要严格的点与点之间的连线，可通过监听图表鼠标事件动态绘制线条：

plotOptions: {
    // 保留你原有的plotOptions配置...
    series: {
        marker: {
            enabled: false,
            symbol: "circle",
            radius: 2,
            states: {
                hover: {
                    enabled: true,
                    radius: 3,
                    lineWidth: 2
                }
            }
        }
    },
    area: {
        stacking: 'normal',
        lineColor: '#666666',
        lineWidth: 1,
        marker: {
            lineWidth: 1,
            lineColor: '#666666'
        }
    }
},
tooltip: {
    shared: true // 必须开启共享，才能获取所有hover点
},
chart: {
    events: {
        mousemove: function(e) {
            const chart = this;
            // 清除之前的自定义连线
            if (chart.customLine) {
                chart.customLine.destroy();
            }
            // 获取当前hover的所有点
            const hoverPoints = chart.hoverPoints;
            if (hoverPoints && hoverPoints.length > 1) {
                // 取第一个和最后一个点（或按需选择对应点）
                const firstPoint = hoverPoints[0];
                const lastPoint = hoverPoints[hoverPoints.length - 1];
                // 绘制连线
                chart.customLine = chart.renderer.path([
                    'M', firstPoint.plotX + chart.plotLeft, firstPoint.plotY + chart.plotTop,
                    'L', lastPoint.plotX + chart.plotLeft, lastPoint.plotY + chart.plotTop
                ])
                .attr({
                    stroke: '#666',
                    strokeWidth: 1,
                    dashStyle: 'solid'
                })
                .add();
            }
        },
        mouseout: function() {
            // 鼠标移出时清除连线
            if (this.customLine) {
                this.customLine.destroy();
                this.customLine = null;
            }
        }
    }
}

两种方式都能实现你要的效果，方式一适合快速实现，方式二更精准可控。

内容的提问来源于stack exchange，提问作者Tal Levi