Highcharts折线图标记点移出悬停后上移问题求助

Hey there! I see the frustrating issue you're facing with your Font Awesome markers shifting permanently after hover—let's get that fixed right away. The root problem lies in how your custom symbol renderer handles positioning during Highcharts' hover state redraw. Right now, the text element is positioned based on the top-left corner of the marker bounds, but Highcharts expects markers to be centered, and the hover-triggered re-render doesn't account for this misalignment.

Here's the adjusted plugin code that resolves the positioning issue:

(function (H) { 
  function symbolWrap(proceed, symbol, x, y, w, h, options) { 
    // Handle regular Font Awesome icons
    if (symbol.indexOf('text:') === 0) { 
      var text = symbol.split(':')[1], 
          // Calculate the exact center of the marker's bounds
          centerX = x + w / 2,
          centerY = y + h / 2;
          
      var svgElem = this.text(text, centerX, centerY) 
        .css({ 
          fontFamily: '"Font Awesome 5 Free"', 
          fontSize: (h * 2) + "px" 
        })
        // Ensure the icon is perfectly centered both horizontally and vertically
        .attr({
          'text-anchor': 'middle',
          'dominant-baseline': 'middle'
        }); 
        
      if (svgElem.renderer.isVML) { 
        svgElem.fillSetter = function (value, key, element) { 
          element.style.color = H.Color(value).get('rgb'); 
        }; 
      } 
      return svgElem; 
    } 
    
    // Handle solid Font Awesome icons (with bold weight)
    if (symbol.indexOf('textn:') === 0) { 
      var text = symbol.split(':')[1],
          centerX = x + w / 2,
          centerY = y + h / 2;
          
      var svgElem = this.text(text, centerX, centerY) 
        .css({ 
          fontFamily: '"Font Awesome 5 Free"', 
          fontSize: (h * 2) + "px", 
          fontWeight: 900 
        })
        .attr({
          'text-anchor': 'middle',
          'dominant-baseline': 'middle'
        }); 
        
      if (svgElem.renderer.isVML) { 
        svgElem.fillSetter = function (value, key, element) { 
          element.style.color = H.Color(value).get('rgb'); 
        }; 
      } 
      return svgElem; 
    } 
    
    return proceed.apply(this, [].slice.call(arguments, 1)); 
  } 
  
  H.wrap(H.SVGRenderer.prototype, 'symbol', symbolWrap); 
  if (H.VMLRenderer) { 
    H.wrap(H.VMLRenderer.prototype, 'symbol', symbolWrap); 
  } 
  
  // Load the font for SVG exports
  H.wrap(H.Chart.prototype, 'getSVG', function (proceed) { 
    var svg = proceed.call(this); 
    svg = '<?xml-stylesheet type="text/css" ' + 
          'href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" ?>' + svg; 
    return svg; 
  }); 
}(Highcharts));

Key Fixes Explained: #

• Centered Coordinates: Calculated centerX and centerY from the marker's top-left position and dimensions, so the icon is anchored exactly at the marker's intended center point.
• Text Alignment Attributes: Added text-anchor: middle and dominant-baseline: middle to ensure the Font Awesome icon stays perfectly centered within its bounds, even when Highcharts re-renders the marker during hover states.

This adjustment ensures that whenever the chart redraws (like when you hover and move away), the icon stays locked to the correct position on the line instead of shifting upwards permanently.

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