Аннотация Highcharts SVG не перемещается вместе с другими фигурами - PullRequest
Новая
       24

Аннотация Highcharts SVG не перемещается вместе с другими фигурами

0 голосов
/ 19 октября 2019

в моем проекте 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, поэтому перед использованием «image» я попытался добавить метку с помощью «useHTML»: true, но кажется, что значок перемещается немного после первой перерисовки (false), не знаю почему.

Изображение формы. Я добился этого, добавив форму «изображение».

1 Ответ

0 голосов
/ 21 октября 2019 
 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 является определенной формой. Посмотреть демо

...