Highcharts Annotation中SVG路径无法随其他图形拖动问题问询

核心问题原因 #

你遇到的path类型SVG无法随Annotation一同拖动，本质是自定义添加的SVG没有被纳入Highcharts Annotation的shapes集合。看你自定义的onDrag事件代码里，是通过遍历this.shapes和this.labels来执行translate操作，但如果你的SVG不是通过Annotation官方的shapes配置项添加的，Annotation就不会把它识别为自身需要管理的元素，自然拖动时不会同步移动。

尝试过程与最终解决 #

1. 你提到尝试Sebastian的方案后坐标计算困难，这确实是自定义SVG路径时容易踩的坑——Highcharts的坐标体系基于绘图区，手动映射SVG路径坐标到图表坐标需要精确转换，很容易出现偏差。
2. 关于Font-Awesome图标，你之前用useHTML: true的标签出现偏移，大概率是Highcharts的redraw机制对HTML元素和SVG元素的位置处理逻辑不同，首次redraw时图表布局重算，导致HTML标签的定位基准发生了变化。
3. 最终采用image类型图形是非常稳妥的方案：把Font-Awesome图标导出为静态图片（比如PNG或SVG格式），通过Annotation的image配置项添加，这样它会自动被纳入Annotation的元素管理体系，自然能跟随拖动同步移动，而且不需要复杂的坐标转换。

补充：你的拖动事件代码说明 #

你自定义的onDrag逻辑是针对X轴步进拖动的，这里要注意：如果后续还要添加其他类型的Annotation元素，确保它们都通过官方配置项添加，这样才会被Annotation的shapes/labels集合包含，拖动逻辑才能覆盖到。比如官方支持的shape、label、image都会自动加入对应集合，而手动追加的SVG元素则需要你额外处理其translate逻辑。

Highcharts.Annotation.prototype.onDrag = function (e) { 
  if (this.chart.isInsidePlot(e.chartX - this.chart.plotLeft, e.chartY - this.chart.plotTop)) { 
    var translation = this.mouseMoveToTranslation(e), 
        xAxis = this.chart.xAxis[0], 
        yAxis = this.chart.yAxis[0], 
        xStep = this.options.stepX, 
        yStep = this.options.stepY, 
        pxStep = xAxis.toPixels(xStep) - xAxis.toPixels(0), 
        pyStep = yAxis.toPixels(yStep) - yAxis.toPixels(0); 
    if (this.options.draggable === 'x') { 
      //for now, it's exclusive for age handle 
      this.potentialTranslationX += translation.x; 
      if (Math.abs(this.potentialTranslationX) >= Math.abs(pxStep)) { 
        translation.x = (this.potentialTranslationX > 0) ? pxStep : -pxStep; 
        translation.y = 0; 
        this.currentXValue += (this.potentialTranslationX > 0) ? xStep : -xStep; 
        this.potentialTranslationX -= (this.potentialTranslationX > 0) ? pxStep : -pxStep; 
        //minus the step and continue to cumulate 
        //this.potentialTranslation = 0; //not correct, the mouse will go faster than the handle 
        if (this.points.length) { 
          this.translate(translation.x, 0); 
        } else { 
          this.shapes.forEach(function (shape) { 
            shape.translate(translation.x, 0); 
          }); 
          this.labels.forEach(function (label) { 
            label.translate(translation.x, 0); 
            label.text = label.annotation.options.preText + label.annotation.currentXValue; 
          }); 
        } 
      } 
    } 
    this.redraw(false); 
  } 
}

内容的提问来源于stack exchange，提问作者Roy.L.T