时间戳

首页 > 解决方案 > Highcharts Annotation SVG 不随其他形状移动

javascript - Highcharts Annotation SVG 不随其他形状移动

问题描述

在我的 Highcharts 项目中，我成功地使单个注释中的所有形状都可拖动，但是当我添加 SVG（此形状的类型为“路径”）时，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：在我的图表上尝试了塞巴斯蒂安的答案后，事实证明很难计算出正确的坐标。最后我使用类型“图像”来显示形状。该形状是一个 Font-Awesome 图标，所以在使用“图像”之前，我确实尝试添加一个带有“useHTML”的标签：true，但似乎图标在第一次重绘（false）后移动了一点，不知道为什么。

形状的图像。我通过添加“图像”形状来实现这一点。

标签： javascriptsvghighchartsannotations

解决方案

 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 是一个定义的形状。 查看演示

推荐阅读