Highcharts Annotation SVG 不会随其他形状移动

Question

在我的 Highcharts 项目中，我成功地使单个注释中的所有形状都可拖动，但是当我添加 SVG 时（此形状的类型为 "path"），SVG 不会随着移动注释中的其他形状。

我需要在注释中有一些自定义的形状。谁能指出这个 SVG 的问题是什么？是否可以将 SVG 放在注释中并且仍然可以拖动？还是我犯了一些错误导致了这个问题？

这里是我的例子。 https://jsfiddle.net/roy_jaide/754xuhtk/如你所见，标签、圆圈和线条都是可拖动的，但 SVG 形状根本不会移动。

感谢您阅读我的问题，如果能提供任何解决方案，我们将不胜感激。

 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);
        }
    }

更新 1：在我的图表上尝试了塞巴斯蒂安的答案后，结果证明很难计算出正确的坐标。最后我使用 type "image" 来显示形状。形状是一个 Font-Awesome 图标，所以在使用 "image" 之前，我确实尝试添加一个带有 "useHTML" 的标签：true，但图标似乎在第一次重绘（false）后移动了一点，而不是知道为什么。

The image of the shape. I achieved this by adding "image" shape.

Answer 1

 d: ["M", 440, 72, "L", 410, 45, 470, 45, "Z"],

我不推荐使用这种方式来创建可拖动的自定义形状。此选项会按预期创建形状，但也会设置固定位置。可能可以实现移动功能，但我认为这将需要对可拖动的核心代码进行大量更改。

我可以建议这样做：

annotations: [{
 draggable: 'x',
 shapes: [{
   points: [{
     x: 440,
     y: 72
   }, {
     x: 410,
     y: 45
   }, {
     x: 470,
     y: 45
   }, {
     x: 440,
     y: 72
   }],
   fill: 'red',
   type: 'path',
   stroke: "blue",
   strokeWidth: 3,
   markerStart: 'circle',
 }]
}]

其中 markerStart 是定义的形状。 See a Demo

Highcharts Annotation SVG 不会随其他形状移动

Highcharts Annotation SVG doesn't move with other shapes

javascript

svg

annotations

highcharts