Highcharts股票图鼠标移动同步更新值及tooltip样式问题

一、折线当前值同步更新实现 #

原绑定point.events.mouseOver的逻辑仅在鼠标悬停到单个具体数据点时触发，无法覆盖鼠标在图表任意区域移动、同时获取所有序列同x轴位置数值的需求，替换为以下实现即可：

• 移除原有plotOptions.series.point.events下的mouseOver回调
• 开启tooltip共享模式，利用tooltip刷新时自带的全量点位数据更新网格，代码如下：

plotOptions: {
  series: {
    showInNavigator: true,
    dataGrouping: {
      enabled: false,
    }
  }
},
tooltip: {
  shared: true, // 开启共享tooltip，触发时会返回所有序列的当前点位
  crosshairs: true, // 开启垂直十字准线
  formatter: function() {
    // 遍历当前x坐标下所有序列的点位，同步更新网格数据
    const updatedGrid = stockGrid.map(stockItem => {
      const matchedPoint = this.points.find(p => p.series.name === stockItem.name);
      return matchedPoint 
        ? { ...stockItem, currentValue: matchedPoint.y } 
        : stockItem;
    });
    setStockGrid(updatedGrid);
    // 保留原有默认tooltip渲染逻辑，不影响提示框展示
    return this.defaultFormatter.call(this);
  }
}

如果需要在鼠标移出图表时重置数值，可额外在chart.events.load中绑定容器的mouseleave事件做处理。

二、Tooltip边框移除但保留连接线段 #

直接设置tooltip.borderWidth = 0会导致连接器（tooltip到垂直准线的线段）被一起隐藏，是因为Highcharts默认将外框和连接器归为同个路径元素，不要直接修改borderWidth为0，按以下配置调整即可解决：

tooltip: {
  // 保留borderWidth默认值，不要设为0
  borderWidth: 1,
  // 边框色设为透明，隐藏外框线条
  borderColor: 'transparent',
  // 关闭默认阴影，避免透明边框透出阴影块
  shadow: false,
  // 自定义tooltip类名，方便单独控制样式
  className: 'custom-stock-tooltip',
  // 保留连接器配置，默认值即为crookedLine，不要设为false
  connectorShape: 'crookedLine',
  // 按需设置tooltip背景色、内边距
  backgroundColor: '#ffffff',
  padding: 8
}

配套添加以下CSS样式，精准隐藏外框、保留连接器：

.custom-stock-tooltip .highcharts-tooltip-box {
  stroke: none !important; /* 彻底隐藏矩形外框 */
  fill-opacity: 1;
}
/* 单独设置连接器样式，可按需调整颜色、粗细 */
.custom-stock-tooltip .highcharts-tooltip-connector {
  stroke: #cccccc;
  stroke-width: 1px;
}

调整后外层矩形边框完全隐藏，tooltip与垂直准线之间的连接线段会正常显示。

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