Javascript 单击并拖动每条绘制线即可创建多条垂直绘制线。在角度6和高度图表中开发

我正在开发一种功能，可以在单击线图时创建垂直线。用户应该能够左右拖动线条。我正在开发同样的角度6和高图表

我可以创建垂直线，但不能拖动线

下面是我的元件代码，单击即可创建图表和绘图线

import * as Highcharts from 'highcharts';
import * as HichartsExporting from 'highcharts/modules/exporting.src';

HichartsExporting(Highcharts);

var clickX;
var clickY;

@Injectable()
export class HighchartsService {

  charts = [];
  defaultOptions = {
    title: {
      text: 'Vibration Data'
    },
    credits: {
      enabled: false
    },
    subtitle: {
      text: 'Nidec.com'
    },
    yAxis: {
      title: {
        text: ''
      }
    },
    xAxis: {
        categories: []
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle'
    },
    // plotOptions: {
    //   series: {        
    //     point: {
    //       events: {
    //         click: function () {
    //           alert('Category: ' + this.category + ', value: ' + this.y);
    //         }
    //       }
    //     }
    //   }
    // },
    series: [],
    chart: {      
      events: {
        click: function (e) {
          let chart = this;
          let xAxis = chart.xAxis[0];
          let xValue = xAxis.toValue(this.mouseDownX);

          xAxis.addPlotLine({
            value: xValue,
            color: '#ff0000',
            width: 2,
            label: {
              rotation: 0,
              text:xValue
            },            
            events: {
              mousedown : function (e) {
                clickX=e.pageX;
              },
              mouseout: function (e) {

              },
              mousemove: function(e) {                
                this.svgElem.translate(e.pageX - clickX, e.pageY);                
              }
            }            
          });

        }
      }

    },
    exporting : {
      buttons: {
        customButton: {
          text: 'Close',
          onclick: function (e) {
            //console.log(e);
            console.log(document.getElementById(e.path[4].id).outerHTML = '');
            //console.log();
          }
        }
      }
    }
  }

  constructor() {
  }

  createChart(container, series, xAxisData, options?: any) {    
    this.defaultOptions.series= series;
    this.defaultOptions.xAxis.categories = xAxisData; 
    let opts = !!options ? options : this.defaultOptions;
    let e = document.createElement("div");

    container.appendChild(e);

    if (!!opts.chart) {
      opts.chart['renderTo'] = e;
    }
    else {
      opts.chart = {
        'renderTo': e
      }
    }

    this.charts.push(new Highcharts.Chart(opts));
  }

---

问题是要如何转换打印线。如果在绘图线上添加

mousemove

事件，则仅当鼠标直接位于该绘图线上时才会调用该事件。相反，我建议在整个文档中添加mousemove事件，至少在图表的容器中是这样。下面是一个简单的演示：

---

福斯：非常感谢你的解决方案。但我的问题是在同一个容器元素中呈现多个图。因此，如果我在容器级别附加一个事件，那么该行也可以移动到其他图形。我不能像click事件那样将mousemove事件附加到特定的图形上。只是为了澄清：页面上有多个图表，或者将不同的图表呈现到同一个容器中？行不能移动到其他图形，因为它是一个单独的SVG:）Fus：我将不同的图表呈现到同一个容器中。那么您在同一时间只有一个图表，对吗？很抱歉，我仍然没有看到这里的问题。你能制作一个演示吗？还是更新我的？太好了！你需要计算这个交点。你可以根据。

document.getElementById('container')
  .addEventListener(
    'mousemove',
    function(e) {
      if (chart.activePlotLine) {
        chart.activePlotLine.svgElem.translate(e.pageX - chart.clickX, 0);
      }
    }
  );

document.addEventListener(
  'mouseup',
  function(e) {
    if (chart.activePlotLine) {
      chart.activePlotLine = false;
    }
  }
);

var chart = Highcharts.chart('container', {
  title: {
    text: 'Vibration Data'
  },
  credits: {
    enabled: false
  },
  subtitle: {
    text: 'Nidec.com'
  },
  yAxis: {
    title: {
      text: ''
    }
  },
  xAxis: {
    categories: []
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },
  series: [{
    data: [10, 1, 5]
  }],
  chart: {
    events: {
      click: function(e) {
        let chart = this;
        let xAxis = chart.xAxis[0];
        let xValue = xAxis.toValue(this.mouseDownX);

        let clickX = 0;

        xAxis.addPlotLine({
          value: xValue,
          color: '#ff0000',
          width: 2,
          label: {
            rotation: 0,
            text: xValue
          },
          events: {
            mousedown: function(e) {
              chart.clickX = e.pageX;
              chart.activePlotLine = this;
            }
          }
        });

      }
    }

  },
  exporting: {
    buttons: {
      customButton: {
        text: 'Close',
        onclick: function(e) {
          //console.log(e);
          console.log(document.getElementById(e.path[4].id).outerHTML = '');
          //console.log();
        }
      }
    }
  }
});