LightningChart.js 3D箱形系列：单箱高亮及取值实现问询

LightningChart JS 支持在单个BoxSeries3D中对单个箱形进行悬停交互，无需拆分为多个系列，完全不会影响性能。具体实现步骤如下：

• 启用单个箱形交互：创建BoxSeries3D时，通过配置项开启单箱形鼠标交互，同时关闭整个系列的默认高亮：

  const boxSeries = chart.addBoxSeries3D({
      mouseInteractions: true
  })
  // 关闭系列整体高亮，确保仅单个箱形响应交互
  boxSeries.setHighlightOnHover(false)
  

• 监听悬停事件并获取数值：通过onMouseMove事件捕获当前悬停的箱形实例，直接提取其尺寸、位置等数据：

  let lastHoveredBox = null
  let originalFillStyle = null
  let originalStrokeStyle = null
  
  boxSeries.onMouseMove((_, event) => {
      const hoveredBox = event.target
      if (hoveredBox !== lastHoveredBox) {
          // 恢复上一个悬停箱形的原始样式
          if (lastHoveredBox) {
              lastHoveredBox.setFillStyle(originalFillStyle)
              lastHoveredBox.setStrokeStyle(originalStrokeStyle)
          }
          // 记录当前箱形的原始样式
          originalFillStyle = hoveredBox.getFillStyle()
          originalStrokeStyle = hoveredBox.getStrokeStyle()
          // 设置高亮样式
          hoveredBox.setFillStyle(new SolidFill({ color: ColorHEX('#ff6b6b') }))
          hoveredBox.setStrokeStyle(new SolidLine({ thickness: 2, color: ColorHEX('#ffffff') }))
          // 获取并使用箱形对应数值
          const boxDimensions = hoveredBox.getDimensions()
          console.log('当前悬停箱形数据:', boxDimensions)
          lastHoveredBox = hoveredBox
      }
  })
  

• 处理鼠标离开场景：添加onMouseLeave事件，确保鼠标离开系列时恢复所有箱形的原始样式：

  boxSeries.onMouseLeave(() => {
      if (lastHoveredBox) {
          lastHoveredBox.setFillStyle(originalFillStyle)
          lastHoveredBox.setStrokeStyle(originalStrokeStyle)
          lastHoveredBox = null
      }
  })
  

这种方案所有箱形都在同一个系列中维护，性能不受影响，同时能精准实现单个箱形的悬停高亮和数据获取需求。

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